HTML or JQuery for coding a static background image |
HTML or JQuery for coding a static background image |
Pufbun |
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. |
Christian J |
Nov 7 2013, 09:39 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
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 |
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. |
Christian J |
Nov 14 2013, 01:32 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,630 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 |
Pufbun |
Nov 14 2013, 02:19 PM
Post
#5
|
Group: Members Posts: 6 Joined: 7-November 13 Member No.: 19,938 |
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 |
Nov 14 2013, 02:54 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
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 |
Nov 14 2013, 03:30 PM
Post
#7
|
Group: Members Posts: 6 Joined: 7-November 13 Member No.: 19,938 |
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 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 |
Nov 14 2013, 03:40 PM
Post
#8
|
Group: Members Posts: 6 Joined: 7-November 13 Member No.: 19,938 |
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 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 |
Nov 14 2013, 03:51 PM
Post
#9
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
|
Christian J |
Nov 14 2013, 03:54 PM
Post
#10
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
|
Pufbun |
Nov 14 2013, 04:09 PM
Post
#11
|
Group: Members Posts: 6 Joined: 7-November 13 Member No.: 19,938 |
|
Frederiek |
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.
|
Christian J |
Nov 15 2013, 10:53 AM
Post
#13
|
. Group: WDG Moderators Posts: 9,630 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.
|
Frederiek |
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.
|
Lo-Fi Version | Time is now: 29th March 2024 - 07:07 AM |