Jump to content

Search the Community

Showing results for tags 'background image'.

  • 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 10 results

  1. Is it (see title) possible? If yes, how? If not, do you have another suggestion to obtain a similar effect. CONSTRAINT: This is for an HTML formatted email, and I must avoid elaborate coding.
  2. I know how to set a background image in a w3-display-container, but how do you set a background image in a container using w3.css? I want to put an input form and some text over the image and I'm not happy with my options for placing things in a w3-display-container. Thanks in advance. Linvel
  3. Hello, I have a random background image running and loading the background image into a div with the id=page-header. I got the image itself to be responsive, but I also need its parent div's height to be responsive as well. Right now the image seems to size correctly, but once it gets smaller in height than the parent div, that div's bg color shows above and below. I've tried a few different things with the height, but am having no luck. the site is here: sjmradio.oiw9.com/about-us/customer-service.htm Here's the code that I currently have on the parent div: #page-header { position: relative; height: 360px; margin-bottom: 50px; background: no-repeat center center; color: #fff; background-color: #424242; background-size: 100%; } This is what I'm using for the JS for the random image: var imgCount = 4; var dir = '/images/random-headers-about/'; var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1; var images = new Array images[1] = "about-top-header-001.jpg", images[2] = "about-top-header-002.jpg", images[3] = "about-top-header-003.jpg", images[4] = "about-top-header-004.jpg", document.getElementById("page-header").style.backgroundImage = "url(" + dir + images[randomCount] + ")"; Any and all suggestions are welcome! Thanks in advance, mh
  4. I have been building a website that I like but it is a little bit 'busy' looking. I have a background image (a picture of bark) with multiple boxes floating on it with the info. For example, I have a boxs for navigation, one for the title, and one eith the article. They are spaced out so you can see the bark background through the cracks. I like this but it distracts from the main information in a way I dont want. How can I suround these boxes with a semi transparent white so that you can only lightly see the image through it. I still want the picture to be clear on the edges just have the 'fog' in the center. i tried putting them in an element that has the opacity set down but that affects all child elements. How can i do this but keep the inside text fully clear?
  5. Hello Internet, I am struggling with what I am guessing is a relatively simple concept. I have looked at some tutorials on W3 and did general searches on the internet. The effect I am trying to accomplish it to have the image I supply as a background image scale with the screen size - screen size meaning 100% vs 75% vs 50%. In the attachment the Tan area is an image I want to scale with the screen size. My primary two constraints are: 1. I want the background color to be a dark gray 2. I also want the tan image that is 1000px wide centered in the screen. The height is irrelevant because it’s the sides that are important to me. The height can be any size. If the screen is at 100% or at 25% the height needs to fill the whole screen. I have tried many things - height:auto, height:100%, em, divs... many different things. If you can direct me to a tutorial or help in any way I would appreciate it. I did include a file that shows the effect I am looking for.Screen size.pdf
  6. Hello, I'm trying to fix my background image so that is stays positioned around the content container when a web browser is resized like: http://digitaldudz.com. I'd love to know how to do this. When I try to accomplish this same task the background image moves when the web browser is moved and the container floats over the background image. Any help would be greatly appreciated. Thanks!
  7. Hello. I've created a page that has a grey body and a background image within the container in the body. The container will not show the background image when centered. I read up on this online and found that if I float the container to the left, the background image shows up. Sure enough, it worked, but I want my container centered. Does anyone have a work around for this? Here is the page http://aphoniastudios.com/TestSite/t3/ and here is the css: @charset "UTF-8";/* CSS Document */ html {height:100%}body {background: #CCC;width: 95%;height: 95%;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#e22426; text-decoration:none;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 2.1%;background-image: url(Images/background1.jpg);img {max-width: 100%;}background-size: 100%;background-repeat:no-repeat }#column1 {float: left;position: relative;width: 230px;height: 100%;max-height:688px;margin: 0px .5% 0px 7%;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding:8px 4px;}#p {font-size:13px;position:absolute;bottom:100px;line-height: 17px;}#column1 #footer {background-color: #e22426;padding: 8px;box-shadow:3px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;position:absolute;bottom:0;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 10%;height: 100%;color:#4D4D4D;font-size: .65em;font-weight:900;}nav {position: absolute;z-index: 2;background-color: #999;width: 10%;height: 100px;margin-top: 52px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {display:block;list-style-type: none;margin: 10px;padding: 0px;line-height:65%;}#column3{float:left;margin-top: 52px;margin-bottom: 0px;position: relative;z-index: 1;width: 285px;height: 60%;padding-top: 30px;padding-right: 20px;padding-bottom: 20px;padding-left: 150px;.aboutlinks {word-spacing: 2px;color: #e22426;}#column4 {float: left;position: relative;left:-100px;width: 20%;height:100%,padding: 0px;}
  8. Hi, I have used the css background-image property in order to set a background image to my website.http://hamaakav.co.il/ The background image repeat itself, from top to down as it should, however between one repeat to anther there is a black line. How can make this line to disappear?
  9. I have been looking around and reading up on this and this is the simplest way I have been able to find so far... It still has not worked for me and there has to be a better way. Anyone? ***************<li><span><span><span><span>Boby</span></span></span></span></li> li { background: url(boby.jpg) center no-repeat; }li span { background: url(corner_top_right.gif) top right no-repeat; display: block; }li span span { background: url(corner_bottom_right.gif) bottom right no-repeat; }li span span span { background: url(corner_bottom_left.gif) bottom left no-repeat; }li span span span span { background: url(corner_top_left.gif) top left no-repeat; padding: 0.5em; }***************
  10. Hello everyone,I am brand new to this, as may already be evident from the wording of my thread title. After some reading and practice, I am fairly confident on the basics of CSS and XHTML, and I am wanting to push myself a little. In the website I am creating for my own practice sake, I have an external CSS page which is working satisfactorily for basic things around the website. Now I'd like to see if I can make certain sections of the background image to be links to other pages, instead of the HTML navbar I have created. So if I want different sections or elements of the background image to link to other pages on the website, is there a way to do this? If this is written into external CSS, then it should be the same site-wide, correct? Perhaps I am biting off more than is helpful for me to chew at the moment. Any suggestions/corrections are welcome.Thank you for your time. It is much appreciated.
  • Create New...