CODEWITHSUNDEEP
css
fat_potato
fat_potato

Reputation: 653

background image for homepage

I am quite new to the css and bootstrap i have searched and tried the w3c solution and also the SO but did not work well. Actually i want to have an image as a background on my homepage. on which there would be my content like 3 small buttons/icon in the middle of the page.

I have tried this 

<div id="homepage">

</div>

css:

#homepage{
    background: url(../images/homepage.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat
}

but it is not working.

2nd Solution: Second thing which i tried was to include a img tag then add my content and drag to the middle by absolute position which i think is not a good way because responsiveness did not remain there.

Can any one help me in this regard.

Upvotes: 2

Views: 721

Answers (3)

Kushtrim
Kushtrim

Reputation: 1939

You can try this: 

#homepage{
    background: url(https://paulmason.name/media/demos/full-screen-background-image/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
}

http://jsfiddle.net/y558vo9a/

Upvotes: 1

charliepjive
charliepjive

Reputation: 31

Assuming you double checked the image path,I think the problem is the size of the div.

try giving your div a fixed width and height in order to test if at least this way the image is showing.

<div id="homepage" style="width:500px;height:300px">
</div>

Then check out how to use the bootstrap grid system in order to make your div as big as you wish.

Upvotes: 3

Dev.aaron
Dev.aaron

Reputation: 296

if you want the background image to be in your index page, there is no need in adding '../' and no need in adding background-size, -repeat when you can actually set your code so;

 background: url(images/homepage.jpg) no-repeat 50% 50%;

but if it works for you, you can use it so. And i also noticed, you forgot to close your background-repeat with ';'

Upvotes: 0

Related Questions