Jump to content

Fullscreen background

Sunamena

By Sunamena
in CSS

 Share

Recommended Posts

  • 3 weeks later...
Andreas De Rudder Newbie

Andreas De Rudder

Posted
Posted

Try...

div {
    background: url(mybackgnd.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Do I have to write this in the stylesheet? What do I write then on the other pages? Maybe I have to put some div's somewere? Feel free to look at my website: www.bijbelstudiegent.be

Thank you

Andreas

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Davej made a bit of foobar using on a div, unless that div is made to fill the whole screen its height will only be to content within it. The best option would be to apply to body.

 

<style>
 body {
    background: url(mybackgnd.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
</style>
Can be placed between <head>...</head> tags

 

While 

body {
    background: url(mybackgnd.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
Can be placed in external stylesheet (WITHOUT style tags) which must be linked to, note image must be relative to stylesheet, if stylesheet placed in folder the path to imzage must be adjusted.
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

Right first establish if you can see image

 

IF styling of background-image is placed between styled tags, WITHIN <head> and </head>, place img tag within body as you normally would to show image, if it works and you see imge, whatever is in src, you place that within url() of background-image.

 

IF IN EXTERNAL style sheet, and css file is NOT in the same location as the page you wish to insert background image (as this will use previous solution) place html page with image within that at the same location as css file, again if it shows, the path in src is what you should use for background image.

 

This must be in page with .htm, .html unless using server-side script language .php for example.

 

IF using windows notepad or any basic o/s text editor they MUST be saved as utf-8 encoded ( dropdown close to where you enter filename, and select save as format).

Edited by dsonesuk
Link to comment
Share on other sites
Andreas De Rudder Newbie

Andreas De Rudder

Posted
Posted

I have now this in the head of each page:

 

<style type="text/css">

body {

background-image: url("images/hortensia.jpg");

background-repeat: no-repeat;

background-attachment: fixed;

background-size: 100% 100%;

}

 

And now I have the picture as background.

But there is one small problem. The picture is horizontally a little bit stretched. And when I change the seize of the screen the picture get stretched in different ways. I think it must be possible to get the picture like it is originally, not stretched. But how?

Link to comment
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
×
×
  • Create New...