Jump to content

Search the Community

Showing results for tags 'background'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 36 results

  1. Suncross

    Body Positioning

    I seem to be having problems positioning my background image and colors. body{background-color:#8e97a4;background-image:url(wi/bliner1.png);background-repeat:repeat-x; } That is the current code. Right there in chrome and firefox, the image "blinder1.png" is normal. However, as we all know, this is just going to repeat across the top of the page from left to right. Whenever I add the following stipulation background-position:bottom; it seems to warp the image to a fraction of its' size, let alone not align to the "bottom" of the page. Using the left, it still warps the image but not as much. The latent function, the image warping, is really not a main issue for me right now. I am really wondering how to properly align my image across the bottom of the page. I have used the search function, and searched for about an hour or more today but I havent seen any documentation anywhere about this happening. Can anyone help?
  2. i have a simple table data cell <td> and i have 2 same-sized images i need to put in there, the first image is the <td> background image (which is a transparent png that has a grunge border) and the second image is just a regular JPG. Whenever i just add the <td background="images/bg.png> background PNG image and add the JPG image inside of the <td></td>, you cannot see the background PNG. I need to make the background PNG float over the top of the JPG image. I have tried playing around with z-index and css styles, etc but i cannot seem to make it work. Any help would be appreciated. I have attached 3 images, the brush-bg.png background image, the JPG image, and lastly a JPG of what i want it to look likeRegards,James
  3. RMarinJMZ

    Layout help

    This is my first post here. I am trying to build my design in Dreamweave and I am running into a few walls. I attached a jpg of the layout I want to create. Here is the code for what I have so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML Layout using Div Elements TEST2</title></head><body> <!--<div id="container" style="max-width:1280px; min-width:800px; min-height:768px; max-height:1024px;">--><div id="container-header" style="width:100%; height:38; overflow:hidden; margin:0px; padding:0px;"><div id="header1" style="background-color:#72657E; height:38px; width:10%; float:left;"></div> <div id="header2" style="background-color:#B5ADC2; height:38px; width:20%; float:left;"></div> <div id="header3" style="background-color:#ABA3AE; height:38px; width:772px; float:left;"></div> <div id="header4" style="background-color:#B5ADC2; height:38px; width:5%; float:left;"></div></div><div id="container-main" style="width:100%; height:515px; overflow:hidden; margin:0px; padding:0px;"><div id="navigation" style="background-color:#5E5E5E; height:515px; width:10%; float:left;"></div> <div id="content" style="background-color:#FFFFFF; height:515px; width:20%;float:left;"></div><div id="image" style="background-color:#CCCCCC; height:515px; width:772px; float:left;"></div> <div id="right" style="background-color:#5E5E5E; height:515px; width:5%; float:left;"></div></div><div id="container-strip" style="width:100%; height:10px; overflow:hidden; margin:0px; padding:0px;"><div id="strip1" style="background-color:#72657E; height:10px; width:10%; float:left;"></div> <div id="strip2" style="background-color:#B5ADC2; height:10px; width:20%; float:left;"></div> <div id="strip3" style="background-color:#ABA3AE; height:10px; width:772px; float:left;"></div> <div id="strip4" style="background-color:#B5ADC2; height:10px; width:5%; float:left;"></div></div><div id="container-footer" style="width:100%; height:auto; overflow:hidden; margin:0px; padding:0px;"><div id="footer1" style="background-color:#A59EAD; height;50px; width:10%; float:left;"></div> <div id="footer2" style="background-color:#CDC8D5; height;50px; width:20%; float:left;"></div> <div id="footer3" style="background-color:#BCB5BE; height;50px; width:772px; float:left;"></div> <div id="footer4" style="background-color:#CDC8D5; height;50px; width:5%; float:left;"></div></div></div></body></html> If you view that in a browser, you should be able to see the problem. I need the colors to repeat and expand to the edges of the browser. Ideally, this would be a liquid layout. The white box is the text content and the grey box is an image. The navigation on the left would have a range to expand, min and max. The white text box would have a larger range, but the photo box would be set. Expansion of the vertical spaces would be needed also. Top bar would expand and the strip directly below the content would expand also. The code I have above is the farthest I have gotten without the layout falling apart. As you can see from the layout, there are two areas of content, so once I have the BG functioning properly, the rest of the site should be a breeze. I havent been able to find a good tutorial about this type of layout. Thanks for any help!-Ryan
  4. This is my little site. So the problem is this: Why is the background picture (the one in middle with its frame, you will notice if you check through IE8 and firefox) not visible in IE8 but its all ok in Firefow browser? The link: http://chrisport.zxq.net/ The css code is included in the hmtl file as one can see.
  5. What I want is a image as a background-and then place divs on that same background I use wrapper ^^
  6. Hi, I'm relatively new to CSS, and have been trying to learn to use some of the newer CSS3 features recently. I've been trying to get an effect looking similar to lens vignetting around the edges of a web page and decided to try using the "box-shadow: inset [etc...]" property to do so.However, for some reason when I apply this to my "body" in CSS, the effect does not extend to the bottom of the page. Instead, it seems to be constrained to the extent of the padding around the body element. The only reason I thought it would make sense to add the box-shadow to the body in the first place was because I assumed the body applied to the whole page (I reasoned that if the background-image tiles an image infinitely, regardless of how long the page becomes, the same would apply to the box-shadow property). Obviously, putting the box-shadow on the body was the wrong decision; I'm just wondering how best to get an inset box-shadow to consitently cover all four edges of the frame of the web page and stick/scale with the page to fit different window sizes. The existing method I used does all of that except extend to the bottom edge of the page. Here's the body div in question: body {background-image:url('bg-pattern.png');padding: 4em;margin: auto;font-family: Arial, Helvetica, sans-serif;font-size:100%;color: rgb(215,215,215);box-shadow: inset 0px 0px 250px 0px black;-webkit-box-shadow: inset 0px 0px 250px 0px black;-moz-box-shadow: inset 0px 0px 250px 0px black;background-color: #333333;height: 100%;} And I've attached an image of the problem as well.
  7. I have been using Positioning and Float to set up a banner. I want to have a fixed height banner (starting at the top of the page) and for this to have: an image located on the left; a background (generated from an img); and a single line of text aligned to the right of it and at the bottom. The html has a div with an id. This div contains the img and that has a class which floats it to the left. This div also contains the text, which is aligned to the right. The external CSS style sheet details the id, which repeats a background img to fill the browser window [repeat-x (doesn't seem to matter if I specify left/right/center)], and the class which floats the image [img.floatLeft], Main Problem: It works, but I can't figure out how to get the line of text, which is happily sitting on the right, to be at the bottom of the div. Isn't align deprecated? I'm confused. Secondary Issue; I read about the CSS background-position Property. I would like to fix the banner at the top of the page independent of scrolling, But I can't make it work with the repeated background image. I also noticed that the size of the image used for the repeat is changed when the div is fixed. I'm viewing it in FF 9.0.1. Thanks in advance.for any help / suggestions
  8. Hi! I'm new here, and I'm very new to CSS so I'm sorry if I ask silly questions! I've been working on making a website for a new business, and even though only the 'Coming Soon' page is up, it still demonstrates my problems. http://www.youmightlikethis-music.com I tried to use CSS to make sure the background image fits to whatever size the screen is, but on big screens it is too short, and on smaller screens if you scroll down there is a white bar which I can't get rid of. If someone could help me with this I'd be very appreciative! Thank youu
  9. So Im working on the background of my website trying to mesh colors and such... however I have run into troubles and need a small bit of advice if possible.. http://ezeshops.com/ is my website, for reference. How do the pros out there pick colors for the background that match, is there a tool to make the textured background to the color you want, and what colors would you recommend for my site. 2nd ... I have a div for the header a div for the footer, and a body background.... is there a way to move that header background up slightly so its halfway in the menu without screwing up my shadow effects? Im guessing absolute positioning but figured id ask first The biggest issue is the colors though, I stink at art and cant find a color combo that looks good that have a background texture that meshes well. Thanks.
  10. body {margin: 0;padding: 0;background: #FF9FFF;} div#header {background: center no-repeat url(xxx.png);height: 300px;width: 100%;} div#wrapper {width: 1280px;margin: 0 auto;background: #FFF;} /*div#footer {margin: 0 auto;width: inherit;height: 250px;position: relative;clear: both;}*/ div#menu {margin: 0;width: inherit;height: 40px;background-color: #FF99CC;}div#menu ul {margin: 0;padding: 0;line-height: 40px;} div#menu li {margin: 0;padding: 0;list-style: none;float: right;position: relative;}div#menu ul li a {text-align: center;height: 40px;width: 200px;display: block; color: #FFFFFF;text-decoration: none;text-shadow: 1px 1px 1px #000;}div#menu li:hover {background: #FFFF66;}div#menu ul li a:hover {color: #FF0099}#flashContent { width:100%; height:100%; } <div id="header"></div><div id="wrapper"><div id="content"><div id="menu"><ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li></ul></div> </div><!--<div id="footer"><img src="" /></div>--></div> How can I make my header image of 1280px*200px extend to the full width of a page in different resolutions without repeating?Like this site: http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/ But my header image is a gradient one and I cannot set the header background-color as a gradient one so I get stuck at this.Is there a CSS fix for this problem?
  11. Hey guys! Btw, great new look Okay, I have a problem that I fear cannot be resolved.I would simply like confirmation of this. My site makes use of jQuery and the LavaLamp effet for the menu.You can check it out here. My problem is this: the portfolio section is basically a jQuery slideshow, with fading transitions and such.We're still good. The problem comes when I add an animation the the background image.The slideshow becomes choppy whenever the user moves his mouse. Am I coding in a non-efficent way?Or is this just a normal jQuery limitation? Thanks.
  • Create New...