Jump to content
Please Use CODE Tags

How to add background to HTML based website?

sms1202
By sms1202
in Programming
 Share
Go to solution Solved by Shoob,

Because I smell a homework, If you want it to be just HTML you can use the background attribute:

<body background="img.jpg">

Keep in mind though that the image should be in your project folder if you don't use the full route to the file.

Posted

As the title says I want to know what tag to use to add a really nice background to my webpage for my computer project at school !

Please do include the entire script necessary

post-82127-0-59710600-1441480209_thumb.j

post-82127-0-59926900-1441480207_thumb.j

MacBook Pro 13" Mid 2012 w/Core i5 3210M and glorious HD 4000 Graphics

Link to comment
https://linustechtips.com/topic/444630-how-to-add-background-to-html-based-website/
Share on other sites
Link to post
Share on other sites
Posted

in the <body> change it to this:

 

<body style="background-image: url("imagename + file extension");>

 

so as an example

 

<body style="background-image: url("catpictures.png")>

Specs: CPU - Intel i7 8700K @ 5GHz | GPU - Gigabyte GTX 970 G1 Gaming | Motherboard - ASUS Strix Z370-G WIFI AC | RAM - XPG Gammix DDR4-3000MHz 32GB (2x16GB) | Main Drive - Samsung 850 Evo 500GB M.2 | Other Drives - 7TB/3 Drives | CPU Cooler - Corsair H100i Pro | Case - Fractal Design Define C Mini TG | Power Supply - EVGA G3 850W

Link to post
Share on other sites
Posted
  • Author

in the <body> change it to this:

 

<body style="background-image: url("imagename + file extension");>

 

so as an example

 

<body style="background-image: url("catpictures.png")>

Thank you sir !

Let me test it,if it works I will mark your solved

MacBook Pro 13" Mid 2012 w/Core i5 3210M and glorious HD 4000 Graphics

Link to post
Share on other sites
Posted

Just a personal opinion you shouldn't use a background image. Its very 90s alot of websites just go for a solid color background.

•  i7 4770k @4.5ghz 1.248v • Noctua NHD14  •  ASUS MAXIMUS VI Hero •  Asus STIRIX 980 Ti •

•  Corsair Vengeance Pro 16Gb  •  Samsung 840 250gb + Samsung 1TB 7200RPM •  BenQ XL2430T 144Hz  •

•  Fractal Design R4  •  CoolerMaster GX650 80+ •  Razer Deathadder Chroma  •  Filco Ninja 2 Red  •  HD600/HE-4/ Fiio E17  • 

Link to post
Share on other sites
Posted

Thank you sir !

Let me test it,if it works I will mark your solved

 

Lets hope it works, otherwise I'll need to refresh myself on HTML and CSS lol

Specs: CPU - Intel i7 8700K @ 5GHz | GPU - Gigabyte GTX 970 G1 Gaming | Motherboard - ASUS Strix Z370-G WIFI AC | RAM - XPG Gammix DDR4-3000MHz 32GB (2x16GB) | Main Drive - Samsung 850 Evo 500GB M.2 | Other Drives - 7TB/3 Drives | CPU Cooler - Corsair H100i Pro | Case - Fractal Design Define C Mini TG | Power Supply - EVGA G3 850W

Link to post
Share on other sites
Posted
  • Author
<html><head><title>About Me</title></head><body><body style="background-image: url("C:\Users\smsit\Desktop\Computer Project\PCMasterRace.jpg")><center><h1>About Me</h1></center><center><img src="C:\Users\smsit\Desktop\Computer Project\PCMasterRace.jpg" width=150 heigth= 250 border=5px></html>

I used this and it didn't come

 

Lets hope it works, otherwise I'll need to refresh myself on HTML and CSS lol

 

MacBook Pro 13" Mid 2012 w/Core i5 3210M and glorious HD 4000 Graphics

Link to post
Share on other sites
Posted
  • Solution

Because I smell a homework, If you want it to be just HTML you can use the background attribute:

<body background="img.jpg">

Keep in mind though that the image should be in your project folder if you don't use the full route to the file.

From salty to bath salty in 2.9 seconds

 

Link to post
Share on other sites
Posted
  • Author

Just a personal opinion you shouldn't use a background image. Its very 90s alot of websites just go for a solid color background.

My Teacher would get blown away and give me an A+

So really I don't care whether it is old fashioned

MacBook Pro 13" Mid 2012 w/Core i5 3210M and glorious HD 4000 Graphics

Link to post
Share on other sites
Posted

why are there two <body>'s?

You can also use CSS.

<style>

body {

background-image: url("yourimage");

background-repeat: no-repeat;

}

</style>

Spoiler

Everyday build:

CPU: Intel Core i7 5960x - GPU(s): 2x EVGA GTX 980 Ti Superclocked+ ACX2.0+ (SLI) - Cooler: be quiet! Dark Rock Pro 3 - Motherboard: ASUS Sabertooth X99 - RAM: 32GB Kingston HyperX Fury Black DDR4 4x8GB (2666MHz) - Storage: Intel 750 Series 1.2TB + 4TB WD Black - Case: Corsair 760T White - PSU: SeaSonic 1200W 80+ Platinum Certified - OS: Windows 10 Pro - Wireless Adapter: TP-Link Archer T9E - Monitor: Acer XB270HU bprz - Keyboard: Corsair K70 RGB - Mouse(s): Corsair Gaming M65 RGB + Logitech MX Master - Headphones: Sennheiser PC363D

http://pcpartpicker.com/p/WhyK99 https://linustechtips.com/main/topic/474247-r8-my-build/

 

Weekend build:

CPU: Intel Core i7 5930k - GPU(s): 2x EVGA GTX 980 Ti Classified ACX2.0+ (SLI) - Cooler: NZXT Kraken X61 - Motherboard: ASUS X99-Deluxe - RAM: 32GB Crucial Ballistix Sport LT DDR4 4x8GB (2666MHz) - Storage: Samsung 950 Pro 512GB m.2 & 2TB Samsung 850 Evo - Case: Phanteks Enthoo Evolv - PSU: SeaSonic SnowSilent 1050W 80+ Platinum Certified - OS: Windows 10 Home - Monitor: Dell S2716DG 144hz - Keyboard: Corsair STRAFE RGB - Mouse: Corsair Gaming M65 RGB - Headphones: Sennheiser PC363D

http://pcpartpicker.com/p/YYK93C

Link to post
Share on other sites
Posted
  • Author

Because I smell a homework, If you want it to be just HTML you can use the background attribute:

<body background="img.jpg">

Keep in mind though that the image should be in your project folder if you don't use the full route to the file.

It worked,thanks

But I am not getting the entire image in one screen

How to scale it ?

MacBook Pro 13" Mid 2012 w/Core i5 3210M and glorious HD 4000 Graphics

Link to post
Share on other sites
Posted

It worked,thanks

But I am not getting the entire image in one screen

How to scale it ?

That's where CSS should come into play. If your project doesn't require it, I'd suggest leaving it as it is. But if you want to, you can check this - Full Screen Background Image - Pure CSS Code. Of course you can find other ways of doing it but AFAIK there's no way to scale the background without using any form of CSS.

 

I'd also suggest using a proper text editor like Notepad++. :P

From salty to bath salty in 2.9 seconds

 

Link to post
Share on other sites
Posted 
<html><head><title>About Me</title></head><body><body style="background-image: url("C:\Users\smsit\Desktop\Computer Project\PCMasterRace.jpg")><center><h1>About Me</h1></center><center><img src="C:\Users\smsit\Desktop\Computer Project\PCMasterRace.jpg" width=150 heigth= 250 border=5px></html>

I used this and it didn't come

 

 

Remove the <body> tag, and down below your img src stuff, add </body>

 

So it will be this:

<html><head><title>About Me</title></head><body style="background-image: url("C:\Users\smsit\Desktop\Computer Project\PCMasterRace.jpg")><center><h1>About Me</h1></center><center><img src="C:\Users\smsit\Desktop\Computer Project\PCMasterRace.jpg" width=150 heigth= 250 border=5px></body></html>

Specs: CPU - Intel i7 8700K @ 5GHz | GPU - Gigabyte GTX 970 G1 Gaming | Motherboard - ASUS Strix Z370-G WIFI AC | RAM - XPG Gammix DDR4-3000MHz 32GB (2x16GB) | Main Drive - Samsung 850 Evo 500GB M.2 | Other Drives - 7TB/3 Drives | CPU Cooler - Corsair H100i Pro | Case - Fractal Design Define C Mini TG | Power Supply - EVGA G3 850W

Link to post
Share on other sites
Posted
  • Author

 

Remove the <body> tag, and down below your img src stuff, add </body>

 

So it will be this:

<html><head><title>About Me</title></head><body style="background-image: url("C:\Users\smsit\Desktop\Computer Project\PCMasterRace.jpg")><center><h1>About Me</h1></center><center><img src="C:\Users\smsit\Desktop\Computer Project\PCMasterRace.jpg" width=150 heigth= 250 border=5px></body></html>

NVM

I got it thanks for your help

MacBook Pro 13" Mid 2012 w/Core i5 3210M and glorious HD 4000 Graphics

Link to post
Share on other sites
Posted

I'd also suggest using a proper text editor like Notepad++. :P

 

Sublime is another one, I know a few people that use it, I've heard that Brackets is also quite good

CPU: Intel Core i7-4770k | Mobo: MSI Mpower Max | Cooling: Cryorig R1 Ultimate w/ XT140 front Fan | GPU: EVGA GTX 770 Dual SC SLI | Case: NZXT H440 | Case Fans: Phanteks PH-140SP x5 | PSU: EVGA Supernova P2 1000W | RAM: 16GB Crucial Ballistix Tactical Tracer | SSD: Kingston HyperX 3k 120GB | HDD: Seagate Barracude

Keyboard: Razer Blackwidow Ultimate 2013 | Mouse: Razer Deathadder 2013 | Headphones: Sennheiser HD438s | Mousepad: Razer Goliathus Control | Monitor 1: Benq XL2430T | Monitor 2: BenQ RL2455HM 

 

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

×