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

Link to comment
https://linustechtips.com/topic/498430-htmlcss-text-over-picture/
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

 

<!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 32 GB (4x 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 | Monitor: 24" Acer S240HLBID | OS: Win 11 Pro.

 

Home Lab:  Lenovo ThinkCenter M82 Hyper-V Server 2022 | Dell OptiPlex 9020 Hyper-V Server 2022 | TP-LINK TL-SG108E | Cisco Catalyst C2960CG 8 Port Switch | HP MicroServer G8 SCCM Server | 2x Dell PowerEdge R630 Hyper-V Server 2022

 

 

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 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 32 GB (4x 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 | Monitor: 24" Acer S240HLBID | OS: Win 11 Pro.

 

Home Lab:  Lenovo ThinkCenter M82 Hyper-V Server 2022 | Dell OptiPlex 9020 Hyper-V Server 2022 | TP-LINK TL-SG108E | Cisco Catalyst C2960CG 8 Port Switch | HP MicroServer G8 SCCM Server | 2x Dell PowerEdge R630 Hyper-V Server 2022

 

 

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 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 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 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 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 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 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

×