background image for homepage

Question

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.

score 3 · Answer 1 · answered Nov 01 '17 at 13:32

3

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.

answered Nov 01 '17 at 13:32

charliepjive

31
4

is it not possible to automatically it covers the whole page? – fat potato Nov 01 '17 at 13:37
Something similar was asked here: https://stackoverflow.com/questions/7568931/full-body-background-with-twitter-bootstrap#7569745 check it out maybe it will help you solve your problem. – charliepjive Nov 01 '17 at 13:44

Kushtrim · Answer 2 · 2017-11-01T13:33:55.737

1

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/

edited Nov 01 '17 at 13:33

answered Nov 01 '17 at 13:30

Kushtrim

1,899
6
14

background-size two time ? – fat potato Nov 01 '17 at 13:32
it works fine but is there any solution that it automatically stretched it self according to image? – fat potato Nov 01 '17 at 13:39
That is possible, but your background image would not respond to different screen sizes. – Kushtrim Nov 01 '17 at 13:48

score 0 · Answer 3 · answered Nov 01 '17 at 13:31

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

background image for homepage

3 Answers3