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


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 7 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;}
×
×
  • Create New...