Hi guys,
I’m trying to create a full background image for my homepage only. This is my first attempt at building a website & I’ve tried loads of tutorial but i just can’t get my head around this bit. I’m trying to add a fixed faint grey scale image to the background but it when i try to add it my text/footer disappear.
Complete noob so any help appreciated…I’ll attempt to link a codepen for my (basic) homepage.
or
See the Pen Full Background Image by Darren Hind (@Dazzer1966) on CodePen.
I did not spot any attempt at adding a background image there.
I can only guess at how you want it to appear.
Thanks for the reply SamA74,
All my attempts were a mess so was looking for inspiration. Will the CSS you added apply across all the pages though or did you link to the HTML also?
Hope I’m making sense, I’m still learning 
The way things work in Codepen and how things work in the real world of the web are not always the same.
The code I added was:-
body{
background: url(http://lorempixel.com/800/600/abstract) center;
background-size: cover;
}
I did remove some stuff too, there were several parts where the body background was set to a colour later in queries. I also changed the bg colour of #wrap to something with some transparency to show the image.
If you want that only on one page, there are a few options.
You could not add it to the global css file and put that rule in the <head> section in <style> tags on just that page.
Or you could ID the body on the homepage <body id="home"> and target it in the global css. The id selector should outweigh other stuff interfering with the body background. It is often said that you should not use IDs in css selectors due to their immense specificity weight, but in some cases you can use it to your advantage if you know what you are doing.
Many thanks again.
I spent a while trying to apply the image to the home page only, it was problematic.
I’ve managed to achieve the result i was looking for but my HTML is now messy, i wonder if you could take a look for me please. Line15, i merged an id and a class with auto indent but it works somehow? If i close the tags and indent properly i lose it all again.
Also my image doesn’t scale with the browser window?
I’ve re-used your image as my site is not live yet.
Ok, sussed it on my todd,
<div id="wrap" div class="body"> worked but wouldn’t validate, <div id="wrap" class="body"> works and validates.
I now know you can have an element with an ID and multiple classes…it’ll come.
Yes, you only want one div in there.
Yes, just separate them with a space.
<div class="class1 class2">
But go easy on the IDs, they are a bit heavy in CSS. Use only when you need to.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.