CSS - Is There A Low Res Option When Loading Css Background Images?
Did a quick Google search and a search on this board.. but didn't find anything... so here's the question:
Is it possible to use a low resolution version of a background image via CSS? In HTML it is like this... Code: <img src="Images/Layout/Header.jpg" lowsrc="Images/Layout/lowRes/Header_lowRes.jpg"> And the CSS I am using is this: Code: #pageHead { background: #FFFFFF url(../Images/Layout/Header.jpg) center top no-repeat; } Is there a tag to add a low res version of the BG image? Thanks in Advance! Similar TutorialsHi all, Erm, when you load a site, and then mouseover something, (css hover) the image, depending on the size, will not load straightaway, but perhaps after a .5 second flash, which makes it look a bit ugly. Does anyone know how to make the page load all the images, without having to mouseover first? Thanks! Robin Okay, so I'm having a little bit of a problem with setting the background color through an onClick event on an option tag. Here is what I mean. Code: <div id = "move"> <form name = form2> <span style="float:left;"> <select name= theDay size=1> <option value=0 selected>Default [themes] <option value=1>White</option> <option value=2 onClick = "red()">Light Blue</option> <option value=3>Aqua <option value=4 value = "document.body.style.backgroundColor= '#98AFC7';">Lighter Blue</option> <option value=5 onClick = "document.body.style.backgroundColor= 'white';">Saturday</option> <option value=6 onClick = "document.body.style.backgroundColor= 'white';">Sunday</option> </select> When I click one of the options, nothing changes, although I set the body.style.backgroundColor to register to a different color when the option tag is clicked. Any ideas? Hi everyone, I have about 10 small 5k images loading in a CSS style down my page - but i find that they will randomly load, sometimes just the first, then stop receive/send activity as if the page has loaded. Sometimes it will load about 4 and then stop, different everytime! can't understand it? Is is the CSS style itself? you are welcome to have a look at my site and the problem page - there should be images of primates loading down the left of the screen in a yellow based CSS sheet. P.S the site has not been launched as of yet - about 90% done Hope someone can help, cheers everyone, Alasdair The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. Hello, I'm new to Dev Shed, I hope I won't seem like a fool here Is there any way to have to background images? I mean, I want to have a heading background image, and a footer background image to the same table. longing to your replies>>>> Hi I have a table which i want to add 2 background images too. what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible? Hi Folks, I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins. Is it possible to somehow attach an image to one side of an element? Thanks John I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property. My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site. In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like: <div id="image" class="page_two"> Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this body { margin:0px; } and then attach an additional style sheet to each page that supersedes the body tag in the main sheet? I hope I am making sense... thanks jon Is there some way to rig CSS to display 2 separate background images. I wanted to put the 2 images on opposite sides. I tried, but both IE 6 and Firefox 1.0.2 displayed only 1 bg image. Anyone got a suggestion? Edit - Oh yeah...this is for the BODY tag. I thought I ought to mention that. Hi there, hopefully someone can help me out with some background image issues. I simply want a right hand section on my site, where i can fill it with content and it can expand appropriately as per the content and display a top, middle and bottom background image. this is because the style of the site has curved edges, so this will be a top image with the curves, a centre image and a bottom image with bottom curves. here is my code but none of the top or bottom background images show. please help, thanking you in advance. css: #feature { float:right; width: 287px; height: auto; } .featuretop { background-image:url(../images/css/featuretop.gif); background-position:top; background-repeat:no-repeat; } .featuremiddle { background-image:url(../images/css/feature.gif); background-position:center; background-repeat:repeat-y; } .featurebottom { background-image:url(../images/css/featurebottom.gif); background-position:bottom; background-repeat:no-repeat; } html code: <div id="feature"> <div class="marTOP10"> <div class="featuretop"></div> <div class="featuremiddle"></div> <div class="featurebottom"></div> </div> </div> K. I have my content bg which is to repeat, but I want to put like another background image set to the right in the content box. HTML Coding ************* <div id="special_feature_top"> <img src="images/specialfeatures.jpg" width="800" height="30" alt="" /> </div> <div id="special_feature_mid"> <img src="images/imagegalleryfeature.jpg" width="193" height="178" alt="Image Gallery" /> <img src="images/jointodayfeature.jpg" width="193" height="178" alt="Join Battle Glory Today!" /> <img src="images/forumsfeature.jpg" width="193" height="178" alt="Forums" /> </div> <div id="special_feature_btm"> <img src="images/specialfeatures_btm.jpg" width="800" height="30" alt="" /> </div> CSS Coding ************* #special_feature_mid { padding: 1px 0px 1px 10px; background-image: url('images/content_bg.jpg'); } That's the coding for the image now just with the content_bg. Now the other image I just want set to the background also so text can over lap or other images. It's a really nice opacity image that blends in perfect. I just want it in background also positioned to the right. thanks Matta Hello, as the subject states I have a question about whether IE can display a background image on a tr and a td correctly. I have a table row with a repeating background then in the first cell in that row I have another background image that goes in the top left corner with a transparent background color on the cell so that the tr background can show though. This works as it should in all browsers except IE where only the td background image appears and its transparent to the page background not the tr background. This is the css: Code: .professor_forum_row { background: #ffffff url(../images/author_post_background.jpg) repeat top left; } .professor_corner_tab { background: transparent url(../images/article_sticky_author.jpg) no-repeat top left; } the html is just a table with those classes assigned to the row and first td. Any ideas on why this is happening? Thanks, Ryan Ive got three divs all nested in a row. The idea is to have the main div (body tag) contain the background image that composes the color. Then the next div contains the upper left hand image and the next div contains the lower right hand image. The problem is this. When I specify "top-left" for the image the image is positioned to the top left. When I specify "bottom-right" for the image in the next div, instead of going to the bottom right, the image ends up all the way over on the top left. why is that? here are my three divs: Code: body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; margin: 0px; border: 3px solid black; background-image: url(http://www.doublethinkdesigns.com/pics/dtdbg.jpg); background-repeat: repeat; /* */ } div#outer { margin: 0px; border: 3px solid white; background-image: url(http://www.doublethinkdesigns.com/pics/upper-left-fan.gif); background-position: top-left; background-repeat: no-repeat; } div#inner { margin: 0px; border: 3px solid black; background-image: url(http://www.doublethinkdesigns.com/pics/lower-right-samurai.gif); background-position: right; background-repeat: no-repeat; } Help please. When I add the extra <div> the background disappears. Background image appears behind "Testing" <body> <div id="siteinfo"> <div id="fullinfo"> <h1>Testing</h1> </div> </div> </body> Background image disappears <body> <div id="siteinfo"> <div id="fullinfo"> <div id="myinfo"> <h1>Testing</h1> </div> </div> </div> </body> Stylesheet entries: body { background-color: #DADADA; background-image: url(/background2.gif); background-position: center; background-repeat: repeat-y; } #siteinfo { position: relative; margin-right: auto; margin-left: auto; width: 800px; } #fullinfo { position: relative; top: 10px; padding-left: 0px; padding-right: 25px; } #myinfo { position: inherit; float: right; width: 600px; } All help appreciated. I'm trying to adapt a technique I saw on matthewjamestaylor 's website to a design for my site that involves overlapping divs with background images. I can't get one of them to show up, and I'm not sure why? I'm using nested divs to get equal column heights. I need different background images on a number of elements. Here's the overall structu <body> - has an image background that repeats. <wrapper> - has an image background that repeats. <header> <navbar> - has a background image that doesn't repeat. </navbar> <banner> </banner> </header> <colmask> <colright> <content> <main> - has a background image that doesn't repeat. </main> <sidebar> - has a background image that doesn't repeat. </sidebar> </content> </colright> </colmask> <footer> - has a background image that doesn't repeat. </footer> </wrapper> </body> I also need a background image on either colmask, colright, or content as well, and it's not showing up! I can't figure out why. It's a border image that should show up between the sidebar background and the main content background. Any idea why it's not expanding to fill it? I'm uploading my site to elenmir dot com / themes / elenmir / default dot html Thanks Hi I have 3 background images that make up the background for my navigation you can see here http://dmumford.bizhat.com/test/about.htm When viewed in FF and Netscape it breaks in 3 positions, in IE just below the top image. Does anyone know why, and can they please help me Thanks This puzzles me for this is the first time EVER that it is not working. I have "background-image" coding and NONE of those images are even showing up, yet when i add them on the index file as a normal image all is well... Any ideas? Is it possible without any client side scripting to load in backgrounda.gif for 800x600 resolution and backgroundb.gif for any other resolution? Server side scripting is ok but I was hoping for a CSS method although I am pretty sure it's not possible. I can't seem to find this solution anywhere I want an image rollover with CSS to work in IE, but IE hates me so I can't get it. Here is one of my buttons: CSS: #tab_nav #home_tab { background: url(images/home.jpg) no-repeat; width: 97px; height: 33px; cursor: pointer; } #tab_nav #home_tab:hover {background: url(images/home-over.jpg) no-repeat; width: 97px; height: 33px; } Here is the HTML too in case you want it: <div id="tab_nav"> <div id="home_tab" onClick="javascript:window.location.href='index.php';"></div> </div> Now, the rollover works well in Mozilla, but it doesn't work in IE. Does anyone know how I can acheive this? Thanks BTW, here is the page I have split up a huge background image into three much smaller images. I want one of them to tile horizontally across the top of the page, another to tile vertically down the left side of the page, and the third to be in the topleft corner of the page. Is there anyway to do this in IE6? I have tried using multiple containers and the background-position attribute, but have been unable to get it right. Any ideas? |