The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML or JQuery for coding a static background image
Pufbun
post Nov 7 2013, 03:14 AM
Post #1





Group: Members
Posts: 6
Joined: 7-November 13
Member No.: 19,938



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 7 2013, 09:39 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,044
Joined: 10-August 06
Member No.: 7



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Pufbun
post Nov 14 2013, 12:36 PM
Post #3





Group: Members
Posts: 6
Joined: 7-November 13
Member No.: 19,938



<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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 14 2013, 01:32 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,044
Joined: 10-August 06
Member No.: 7



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Pufbun
post Nov 14 2013, 02:19 PM
Post #5





Group: Members
Posts: 6
Joined: 7-November 13
Member No.: 19,938



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 14 2013, 02:54 PM
Post #6


.
********

Group: WDG Moderators
Posts: 8,044
Joined: 10-August 06
Member No.: 7



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".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Pufbun
post Nov 14 2013, 03:30 PM
Post #7





Group: Members
Posts: 6
Joined: 7-November 13
Member No.: 19,938



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??
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Pufbun
post Nov 14 2013, 03:40 PM
Post #8





Group: Members
Posts: 6
Joined: 7-November 13
Member No.: 19,938



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???
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 14 2013, 03:51 PM
Post #9


.
********

Group: WDG Moderators
Posts: 8,044
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 14 2013, 03:54 PM
Post #10


.
********

Group: WDG Moderators
Posts: 8,044
Joined: 10-August 06
Member No.: 7



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"?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Pufbun
post Nov 14 2013, 04:09 PM
Post #11





Group: Members
Posts: 6
Joined: 7-November 13
Member No.: 19,938



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 15 2013, 05:54 AM
Post #12


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 15 2013, 10:53 AM
Post #13


.
********

Group: WDG Moderators
Posts: 8,044
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 15 2013, 04:20 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Optional or not, it seems to me simply more logical and proper to use them anyway.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd February 2019 - 02:46 AM