Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ HTML or JQuery for coding a static background image

Posted by: Pufbun Nov 7 2013, 03:14 AM

I'm a complete novice so please excuse me if this seems like a rather elementary question, but I am attempting to build a website for a music blog and I want to use a static image as the background. The only problem is that the image gets distorted when the browser window is manipulated in anyway, or if there is a toolbar/address bar/anything above it. How would I make it so that the image does not distort whenever the page is manipulated, but rather it gets cropped?

Squarespace.com is a great example of what I'm talking about but I believe they use a video as their background image not something static.

Posted by: Christian J Nov 7 2013, 09:39 AM

QUOTE(Pufbun @ Nov 7 2013, 09:14 AM) *

I want to use a static image as the background. The only problem is that the image gets distorted when the browser window is manipulated in anyway

CSS background images normally don't distort, they should get cropped by default. Can you link to a sample page (or post code) showing the problem?

BTW you don't need jQuery to make a background image, CSS works best for that.


Posted by: Pufbun Nov 14 2013, 12:36 PM

<div>
<img src="bg.png" style="width: 100%; height: 100%; top: 0px; left:0px; position: fixed; z-index: 30040;"/>
</div>

That is what I have so far.

Posted by: Christian J Nov 14 2013, 01:32 PM

That's an HTML IMG element, not a CSS background image. Even though the former can be used, it's usually simpler to use CSS background images, like this:

CODE
body {
color: #000;
background: #fff url(bg.png);
}

(note that I specify a text- and background color in case the image isn't loaded).

What do you want to happen if the image is smaller than the browser window? Options include:

- tiling the image

- show the background-color around a single copy of the image

- stretch the image to fit (only in newer browsers), with or without preserving it aspect ratio


Posted by: Pufbun Nov 14 2013, 02:19 PM

QUOTE(Christian J @ Nov 14 2013, 01:32 PM) *

That's an HTML IMG element, not a CSS background image. Even though the former can be used, it's usually simpler to use CSS background images, like this:

CODE
body {
color: #000;
background: #fff url(bg.png);
}

(note that I specify a text- and background color in case the image isn't loaded).

What do you want to happen if the image is smaller than the browser window? Options include:

- tiling the image

- show the background-color around a single copy of the image

- stretch the image to fit (only in newer browsers), with or without preserving it aspect ratio



Here is my CSS file. Are you saying that I don't need the img src tag in my html file??

body
{
background-image:url('Circle logo.png');
background-repeat:no-repeat;
background-size:100% 100%;
}

.topleft{
position:absolute;
top: 0;
left: 0;
background-image: url('Background_filter.jpg');
width: 100px;
height: 100px;
}

Posted by: Christian J Nov 14 2013, 02:54 PM

QUOTE(Pufbun @ Nov 14 2013, 08:19 PM) *

Are you saying that I don't need the img src tag in my html file??

Yes. Also the second CSS rule doesn't seem to be related. This should be enough:

CODE
body
{
background-image:url('Circle%20logo.png');
background-repeat:no-repeat;
background-size: cover;
}

Note that I changed the background-size value to the "cover" keyword to avoid the image from becoming distorted. See also http://www.css3.info/preview/background-size/ (a bit down). Older browsers like IE8 may not support the background-size property.

I also encoded the space in the image URL with "%20".

Posted by: Pufbun Nov 14 2013, 03:30 PM

QUOTE(Christian J @ Nov 14 2013, 02:54 PM) *

QUOTE(Pufbun @ Nov 14 2013, 08:19 PM) *

Are you saying that I don't need the img src tag in my html file??

Yes. Also the second CSS rule doesn't seem to be related. This should be enough:

CODE
body
{
background-image:url('Circle%20logo.png');
background-repeat:no-repeat;
background-size: cover;
}

Note that I changed the background-size value to the "cover" keyword to avoid the image from becoming distorted. See also http://www.css3.info/preview/background-size/ (a bit down). Older browsers like IE8 may not support the background-size property.

I also encoded the space in the image URL with "%20".


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
<title>Example</title>

</head>
<style>
html {
background: url(Background_filter.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</html>


it works now smile.gif one more question if it doesn't bother you. I am trying to add an image over the background will I encounter any difficulties??

Posted by: Pufbun Nov 14 2013, 03:40 PM

QUOTE(Pufbun @ Nov 14 2013, 03:30 PM) *

QUOTE(Christian J @ Nov 14 2013, 02:54 PM) *

QUOTE(Pufbun @ Nov 14 2013, 08:19 PM) *

Are you saying that I don't need the img src tag in my html file??

Yes. Also the second CSS rule doesn't seem to be related. This should be enough:

CODE
body
{
background-image:url('Circle%20logo.png');
background-repeat:no-repeat;
background-size: cover;
}

Note that I changed the background-size value to the "cover" keyword to avoid the image from becoming distorted. See also http://www.css3.info/preview/background-size/ (a bit down). Older browsers like IE8 may not support the background-size property.

I also encoded the space in the image URL with "%20".


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
<title>Example</title>

</head>
<style>
html {
background: url(Background_filter.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</html>


it works now smile.gif one more question if it doesn't bother you. I am trying to add an image over the background will I encounter any difficulties??



For instance i tried entering text onto the page but the background covers everything is there anyway around this???

Posted by: Christian J Nov 14 2013, 03:51 PM

QUOTE(Pufbun @ Nov 14 2013, 09:30 PM) *

I am trying to add an image over the background will I encounter any difficulties??

Probably not.

Posted by: Christian J Nov 14 2013, 03:54 PM

QUOTE(Pufbun @ Nov 14 2013, 09:40 PM) *

For instance i tried entering text onto the page but the background covers everything is there anyway around this???

How do you mean, "cover"?

Posted by: Pufbun Nov 14 2013, 04:09 PM

QUOTE(Christian J @ Nov 14 2013, 03:54 PM) *

QUOTE(Pufbun @ Nov 14 2013, 09:40 PM) *

For instance i tried entering text onto the page but the background covers everything is there anyway around this???

How do you mean, "cover"?



I fixed it. Thanks for the help greatly appreciate it

Posted by: Frederiek Nov 15 2013, 05:54 AM

Just for the record, the code you posted lacks the BODY element and the STYLE needs to go inside HEAD, or add the style declaration in the existing CSS file.

Posted by: Christian J Nov 15 2013, 10:53 AM

The HTML, HEAD and BODY tags are actually optional (just like in HTML4, but unlike in XHTML), as long as the HEAD and BODY sections are implied. So the OP could either move the STYLE element in betwen the HEAD tags, or simply remove the HEAD tags altogether.

Posted by: Frederiek Nov 15 2013, 04:20 PM

Optional or not, it seems to me simply more logical and proper to use them anyway.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)