Help - Search - Members - Calendar
Full Version: HTML or JQuery for coding a static background image
HTMLHelp Forums > Web Authoring > General Web Design
Pufbun
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.
Christian J
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.

Pufbun
<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.
Christian J
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

Pufbun
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;
}
Christian J
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".
Pufbun
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??
Pufbun
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???
Christian J
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.
Christian J
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"?
Pufbun
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
Frederiek
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.
Christian J
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.
Frederiek
Optional or not, it seems to me simply more logical and proper to use them anyway.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.