Jump to content
Please Use CODE Tags

(html/css) text over picture

TheoWasTaken
By TheoWasTaken
in Programming
 Share
Posted

im creating a website and im new so im challenging myself.

 

I want to create a clean website with a big picture and a text over it. 

Examples: 

http://beachcenter.se/

http://www.apple.com/

https://liber.io/

 

thanks. sorry for lack of info. just wants general info

 

<!DOCTYPE html>
<html>
<body>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>

CPU: AMD Ryzen 5 5600X | CPU Cooler: Stock AMD Cooler | Motherboard: Asus ROG STRIX B550-F GAMING (WI-FI) | RAM: Corsair Vengeance LPX 16 GB (2 x 8 GB) DDR4-3000 CL16 | GPU: Nvidia GTX 1060 6GB Zotac Mini | Case: K280 Case | PSU: Cooler Master B600 Power supply | SSD: 1TB  | HDDs: 1x 250GB & 1x 1TB WD Blue | Monitors: 24" Acer S240HLBID + 24" Samsung  | OS: Win 10 Pro

 

Audio: Behringer Q802USB Xenyx 8 Input Mixer |  U-PHORIA UMC204HD | Behringer XM8500 Dynamic Cardioid Vocal Microphone | Sound Blaster Audigy Fx PCI-E card.

 

Home Lab:  Lenovo ThinkCenter M82 ESXi 6.7 | Lenovo M93 Tiny Exchange 2019 | TP-LINK TL-SG1024D 24-Port Gigabit | Cisco ASA 5506 firewall  | Cisco Catalyst 3750 Gigabit Switch | Cisco 2960C-LL | HP MicroServer G8 NAS | Custom built SCCM Server.

 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

 

<!DOCTYPE html>
<html>
<body>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>

 

do you even know what he asked ?

also your html is invalid

~New~  BoomBerryPi project !  ~New~


new build log : http://linustechtips.com/main/topic/533392-build-log-the-scrap-simulator-x/?p=7078757 (5 screen flight sim for 620$ CAD)LTT Web Challenge is back ! go here  :  http://linustechtips.com/main/topic/448184-ltt-web-challenge-3-v21/#entry601004

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

do you even know what he asked ?

also your html is invalid

I got it from www.w3school.com.

CPU: AMD Ryzen 5 5600X | CPU Cooler: Stock AMD Cooler | Motherboard: Asus ROG STRIX B550-F GAMING (WI-FI) | RAM: Corsair Vengeance LPX 16 GB (2 x 8 GB) DDR4-3000 CL16 | GPU: Nvidia GTX 1060 6GB Zotac Mini | Case: K280 Case | PSU: Cooler Master B600 Power supply | SSD: 1TB  | HDDs: 1x 250GB & 1x 1TB WD Blue | Monitors: 24" Acer S240HLBID + 24" Samsung  | OS: Win 10 Pro

 

Audio: Behringer Q802USB Xenyx 8 Input Mixer |  U-PHORIA UMC204HD | Behringer XM8500 Dynamic Cardioid Vocal Microphone | Sound Blaster Audigy Fx PCI-E card.

 

Home Lab:  Lenovo ThinkCenter M82 ESXi 6.7 | Lenovo M93 Tiny Exchange 2019 | TP-LINK TL-SG1024D 24-Port Gigabit | Cisco ASA 5506 firewall  | Cisco Catalyst 3750 Gigabit Switch | Cisco 2960C-LL | HP MicroServer G8 NAS | Custom built SCCM Server.

 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I got it from www.w3school.com.

 

There's no head

[spoiler=»--((¯`·._.·¤~●oO му яιg Oo●~¤·._.·´¯))--«] ☃ Case: Corsair 600T White       ☃ CPU: Core i7 3930k @ 4.3GHz                     ☃ SSD: Crucial M500 480GB

☃ MB:    Asus P9X79 LE         ☃ GPU: Nvidia GTX 780 Reference             ☃ HDD: WD Caviar Green 3TB

☃ PSU:   Seasonic X-1050     ☃ RAM: G.Skill Trident X 32GB @ 2.4GHz   ☃☃☃☃☃☃☃☃☃☃☃☃☃☃ There are 10 types of people in this world. Those who understand binary and those who don't.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

im creating a website and im new so im challenging myself.

 

I want to create a clean website with a big picture and a text over it. 

Examples: 

http://beachcenter.se/

http://www.apple.com/

https://liber.io/

 

thanks. sorry for lack of info. just wants general info

 

You want to layer text over a background image?

 

There are a few techniques you can use.

  • define the background image in CSS, and create a style that makes the text layered above the image
  • if you use the < img > tag in the HTML to add the image, you would need to create a style for the text to position it over the image.  Typically I avoid this as this requires the use of negative values (such as margin: -50px)
Example for No. 1, copy it into w3schools and see how it works

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_mountain

 

<!DOCTYPE html><html><body><style>.text { font-size:24px; padding-top:250px;}.BG {background-image: url("http://www.hiltonhawaiianvillage.com/assets/img/discover/oahu-island-activities/HHV_Oahu-island-activities_Content_Beaches_455x248_x2.jpg");height:500px;}</style><h2>Spectacular Mountain</h2><div class="BG"><p class="text">Text</p></div></body></html>
 

Example for No. 2, copy it into w3schools and see how it works

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_mountain

<!DOCTYPE html><html><body><style>.text {margin-top:-100px;}</style><h2>Spectacular Mountain</h2><img src="http://www.hiltonhawaiianvillage.com/assets/img/discover/oahu-island-activities/HHV_Oahu-island-activities_Content_Beaches_455x248_x2.jpg" alt="Mountain View" style="width:304px;height:228px;"><p class="text">Text</p></body></html>

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

You want to layer text over a background image?

There are a few techniques you can use.

  • define the background image in CSS, and create a style that makes the text layered above the image
  • if you use the < img > tag in the HTML to add the image, you would need to create a style for the text to position it over the image. Typically I avoid this as this requires the use of negative values (such as margin: -50px)
Example for No. 1, copy it into w3schools and see how it works

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_mountain

<!DOCTYPE html><html><body><style>.text { font-size:24px; padding-top:250px;}.BG {background-image: url("http://www.hiltonhawaiianvillage.com/assets/img/discover/oahu-island-activities/HHV_Oahu-island-activities_Content_Beaches_455x248_x2.jpg");height:500px;}</style><h2>Spectacular Mountain</h2><div class="BG"><p class="text">Text</p></div></body></html>
Example for No. 2, copy it into w3schools and see how it works

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_mountain

<!DOCTYPE html><html><body><style>.text {margin-top:-100px;}</style><h2>Spectacular Mountain</h2><img src="http://www.hiltonhawaiianvillage.com/assets/img/discover/oahu-island-activities/HHV_Oahu-island-activities_Content_Beaches_455x248_x2.jpg" alt="Mountain View" style="width:304px;height:228px;"><p class="text">Text</p></body></html>

thanks! will look into more of it tomorow :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

There's no head

 

<head> can be ommitted in specific circumstances in HTML5 which was specified in the doc type:

<!DOCTYPE html>
  • A head element's start tag may be omitted if the element is empty, or if the first thing inside the head element is an element.
  • A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment.

His code snipped met the requirement "is empty" as there were no tags in the head.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I got it from www.w3school.com.

I wouldn't recommend using w3schools... They're better than they used to be, but still have some terrible examples with bad practices.

For any reference use I would suggest using Mozilla Developer Network (MDN). They have great documentation.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

More then year ago I had a client who asked me if i can make website in next few hours. (He had a big meeting for some contract, whatever)

So I did, here is address:

http://rolenddoo.rs/

It's made in pure bootstrap with minimal changes, that is what you need i hope.

Feel free to copy code.

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×