Jump to content

Search the Community

Showing results for tags 'background'.

  • 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

Calendars

  • Community Calendar

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

  1. I have some knowledge about html and css and I am confident in beeing able to hack through most problems through trial and error, but in this case I dont even have an idea on how to fix it and I am afraid it's really simple. So I simply want this black background behind the text and it's supposed to be equal on both sides, but the padding starts virtually too late for that to work. body {position: relative;} body,html,h1,h2,h3,h4,h5,h6,p {font-family: "Lato", sans-serif;} body, html { height: 100%; color: #777777; line-height: 1.8;} html {font-size:1rem;} body {font-size:100%;} h1 {font-size: 1.777em; text-align: center; color: white;} .headline2 {letter-spacing: 0.8em;} .w3-wide {letter-spacing: 0.625em;} <div class="bgimg-1 w3-display-container w3-opacity-min" id="home"> <div class="w3-display-middle"> <h1><span class="w3-black w3-padding-large w3-wide w3-animate-opacity">THORSTEN ERDT</span></h1> <h1><span class="headline2 w3-animate-opacity">ILLUSTRATION</span></h1> </div> </div>
  2. Hi everyone, Have been working with video backgrounds and everything is going great. I have surfed the web and I have been trying to find out how to display an image after a video plays. I know how I can do a poster image before a video plays, I want a poster image to be displayed after the video is done. Now I don't know where I need to post this so I figure I start here. I will post my code down below so you can take a look at what I already have. Thanks in advance! <video onloadstart='this.volume=0.3' id='bg-video-index' onclick='playVideo' autoplay> <source src='media/bg-video/bg-video.mp4' type='video/mp4'> Your browser does not support HTML5 video. </video> <script src="text/javascript"> function playVideo(){ var video = document.getElementById('bg-video-index'); video.play(); video.addEventListener('ended',function(){ window.location = 'media/images/bg/logo.png'; }); } </script>
  3. BACKGROUND: Please compare the Select Language <select> element option menu under the headings Free Webinar and Newsletter/Subscribe found in the navigation bar on the Grammar Captive main page. Therein lies the heart of the following question. QUESTION: How does one set the background and text colors of the <optgroup> element so that they appear properly in Firefox? Neither optgroup { background: black; color: white; } nor optgroup { background-color: black; color: white; } appear to work. Roddy
  4. Dear potential helpers, I try to darken the foreground of my website using a background-color. I created a div which wraps all my other HTML stuff, applied position: relative; to it and a very great z-Index of 999. All my other elements have a z-index of 100 or lower. Why isn't my div not shown in front of the other stuff? In case the background-color of my div foreground is only shown behind all the other elements inside it. Here is my HTML: <html> <body> <div id="foreground"> <!-- All my other HTML stuff having relative positioning and z-index 100 or less --> </div> </body> </html> Here is my CSS: #foreground { position: relative; z-index: 999; display: block; background-color: red; } Maybe u guys have any idea what the matter with this one. Thank you!
  5. Hello This is my site: http://hojalateriaelguante.agencialosnavegantes.cl/ I need the row with the blue background row ("proporcionamos la mejor solución...") to be full-width like in the attached picture but i don't know how. Extra information: This is a wordpress theme and i'm using a page builder, the div i have to change its width is a row inside a section that has its own image background, so the row is an inner row of this section and that's why i think is not possible for the section with the blue background to use the screen's full width. How can i override that? i don't know how to approach this issue.
  6. Are gradients backgrounds animatable by transition yet? I googled a answer and only found ones that were years old or had long work-arounds. I'm wondering if there is some new code to use that I am just overlooking. Thanks ahead, -Line
  7. I am trying to have my background in my division take up it's full height but it is only taking up the height of the header. I've tried setting the height but it doesn't budge. It will only fill as much content as I have in the section, the problem is I only want the one header and that's all. I am simply trying to recreate a webpage that I made on weebly with for my class in html but I am really stuck on this. I will post the code below and a screen shot. <!DOCTYPE html> <html> <head> <style> .first { background-image: url('trampoline.jpg'); margin-bottom: 1000px; background-size: cover; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; font-family: arial; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .footer { background-color: grey; color: white; padding: 15px; } </style> </head> <body> <ul> <li style="float:right"><a href="#news">HOME</a></li> <li style="float:right"><a href="#contact">ABOUT ME</a></li> <li style="float:right"><a href="#about">ABOUT FAMILY</a></li> <li style="float:right"><a href="#about2">ABOUT SCHOOL</a></li> </ul> <div class="first"> <h1>Hi, I'm Mr. Buza. Technology teacher</h1> </div> <div class="clearfix"> <div class="column content"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
  8. I'm a student, and currently busy with creating my own website, but now I've got a question which I can't figure out myself. My website is about professional cycling and on it I'll have the jerseys of the teams which I want to overlay when going over it with the mouse. I figured this out OK, but now it happens that if I move over it with my mouse, a big square overlays the picture (because it's a square picture with a transparent background) and I want that there is only an overlay over the jersey and not over the "background" of the picture. I hope you can help me! Need to fix this! Thank you in advance! .container { position: relative; width: 25%; height: auto; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: #00b0f0; opacity: 0.8; overflow: hidden; width: 100%; height: 0; transition: .5s ease; } .container:hover .overlay { height: 100%; } .text { white-space: nowrap; color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } <div class="container"> <a href="AG2R.html"> <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image"> </a> <div class="overlay"> <div class="text">AG2R La Mondiale</div> </div> </div> This is the picture I used:
  9. My code doesnt work the way I want it. The goal is a gradient background. I made an external style sheet. Like this: .grad{ height: 1020px; width: 1900px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffff+0,ddf1f9+35,a0d8ef+100;Blue+3D+%2318 */ background: #feffff; /* Old browsers */ background: -moz-linear-gradient(top, #feffff 0%, #ddf1f9 35%, #a0d8ef 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 ); /* IE6-9 */ } .maincell { text-align: left; width: 1900px; } .topcell { horizontal-align: left; height: 100px; } .downcell { horizontal-align: left; height: 600px; } The html code <html> <head> <link rel="stylesheet" type="text/css" href="style3.css"> </head> <body class="grad"> <FRAMESET ROWS="15%,85%" frameBorder="0" border="0"> <FRAME SRC="carn_head.php" name="navigatie" scrolling="no"> <FRAME SRC="carn_bottom.html" bordercolor="#CBEDF1" name="main"> </FRAMESET> </body> </html> The error is that I get to see a gradient background but not the code put in the pages. It used to when I hadnt add the .grad class. How can I have a gradient background and over it a frame showing the pages intended in the frame src?
  10. Hi, The website I am currently working on is this: annascherman.com I have set up the image gallery to be an un-ordered list so that I could achieve the irregular grid. I would love for the images to have a slight dark tint on top of them which goes away when you hover over an image (see example here: http://www.wallpaper.com/design/wallpaper-power-200) but for some reason, whenever I add a hover pseudo-element, I get a black background behind the image (I know this because it is also appearing to the right of the image, which I assume has to do with how I set things up as an un-ordered list - it is reading this space as part of the background). What am I doing wrong?!
  11. 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?
  12. Hi i need to make a website for shool project and i made a web design in photoshop and converted it to html.Im using dreamweaver for testing and i made div tags to put the header another for menu and background but i have white space in left and up side of the page.Dont mind the big size of the page im just testing the design.So how i can make the pictures fit? Also what size to use in photoshop because i made it with 1280x1024 and it doesnt fint in the browser?
  13. hi, i hope im posting this in the correct place, i dont know html very well, what im trying to learn is how to create a background box around the title that stretches to the size of the title and is got only a couple of pixels bigger asper example in the picture enclosed. im really sorry if this is not explained properly but i dont know the technical terms. I want to do this in html as my wordpress blog lets me create a text box with custom html without the need to change the css file. many thanks in advance. kind regards Jorge
  14. Hi, I having problem with the placement of the background image which is generated with the plugin Background Manager together with the theme Touchfolio. Here is how my page looks now and this is how I would like it to look and funktion. Basically I would like to be able to adjust the placement of the image. I’m using Firebug and Chrome Developer Tools but don’t find where to do the changes or place the code… The custom stylesheet in background manager is not doing anything for me. In the end I’m looking for a solution with a background image viewer that changes on on page (re)load and resize to different screen sizes and mobil devices… If I activate full screen mode in background manager it looks good on my phone and it also make the image responsive, but on non mobile device it covers the whole screen witch I don't want. If anyone have some input for me I would be very happy Thanks
  15. Hey. I am a beginner in html+css, and so far I have been able to solve everything out with google, but this is where it all stopped. I would like to make a solid color background with three icons on it(they are connections). When you hover the first icon, background color changes to yellow. When you hover second one, background color goes to red etc... what is the best solution for this, considering I would like to make a translation soft (meaning from dark gray to yellow in 0.5second, not instantly). Is that achievable with css or is that something where js comes in? The same goes with a text... i would like it to be clickable and change color on hover, again with transition. Just a simple image, but I guess text is clear enough. Thanks.
  16. I'm trying to learn CSS and am using the w3 tuts. However, I can't seem to get my background image to show up. I can color the bg, but can't figure out what's wrong with my code or image location. The rest of the CSS is working. Thanks for looking. Root folder contains "index.html" and the image, "levitating_maus.jpg" <!DOCTYPE html><html><head><style>body {background-image:url("levitating_maus.jpg");}h1{color:orange;text-align:center;}p{font-family:"Times New Roman";font-size:20px;}</style></head><body><h1>CSS example!</h1><p>This is a paragraph.</p></body></html>
  17. I have a problem When I put a background image and after I put a padding value The position of the pictures changes. I do this: .actual { height: 255px; width: 805px; margin-left: 329px; margin-top: -255px; background-color: #555555; position: absolute; background-image: url(imagens/menu_actual_02.jpg); padding: 20px; } how I can fix this?
  18. Hello, I really need some help concerning multiple responsive background images. I am creating a one page website with wordpress that contains of 6 sections and each should have a background image and over it should be some content (like text) Well I have tried several things and in my latest version it scales the background image in proportion but it cuts some parts off the image when the browser window is smaller <div id="sec_5"> <div class="span5"> <div class="txt_left"> <h2>SOME CONTENT</h2> <p>SOME CONTENT</p> </div> <!-- ende div txt_left --> </div> <!-- end span5 --> </div> <!-- ende div sec_5 --> #sec_5 { padding-top:43,8%; max-width:1920px; height:auto;}.span5 { background-size: 100% auto; background-size: cover; background-position: center center; vertical-align: top; background-image: url('images/page5_bg.jpg');} I also tried to give the background-image a specific height but then of course if you scale it down- it works perfectly without cutting off the image- but the height remains... I really don't know how to solve this issue! I'd appreciate any help!! =)
  19. Hi guys, Sorry if this post is in the wrong section. My website is Joomla 3 and I am looking to add a background image that is fixed and clickable. I found some info on this here link http://subin.me/blog/how-to-background-image-ads-using-pure-html-and-css-a-better-quick-and-smarted-way/ but its way over my head, can someone put it in simple terms as I am a newbie at css. Were do I put the html?Were do i put the css?Were do I put the Simple Jquery Solution code? Thanks
  20. I've been using CSS sprites for a while now, mainly using it for icons, but I want to sprite up my backgrounds too. All the backgrounds I want to sprite I want to repeat Horizontally (left to right) but I can't get it too work. I know you can repeat in one direction only with CSS sprites, but it still wont work. #header {width: 100%; height: 215px;background:transparent url('files/site/spritebg.png') repeat top left; background-position: 0;} .sitemenu {float:left; width:690px; height:35px; color:#FFF; font-size:13pt; background-image:url(files/site/spritebg.png); background-repeat: repeat-x; background-position: 220px 0;} Here's two examples of the codeof two sprites I want to repeat, but both just display the image with huge gaps. Here's a link to the css image: http://i475.photobuc...48/spritebg.png Any help in getting this to work will be great. Its really getting on my nerves now!
  21. Hello once again, i will do this one short, since i feel stupid asking about it, but its a must since i cannot remember, and might be a rookie question -.-'... anyhow, here is my css: .chat_div_bottom_global_friend_list_button a:hover { text-decoration:none; color:#CDCDCD; background-color:#900; } .chat_div_bottom_global_friend_list_button a:link,a:visited,a:active { text-decoration:none; color:#CDCDCD; } here is my html: <span class='chat_div_bottom_global_chat_rooms_button'> Chat Room (Public)</span> <span class='chat_div_bottom_global_friend_list_button'> <a href='#'>Friend list (0)</a></span> now the question, i have a background to the link, but i would like that background, to cover the whole span if possible, any ideas? X)... [PICTURE ATTACHED]
  22. hello w3 once again, i have a question. for the momment being, im trying to play a little bit with the scrollbars, to edit the colors on the and stuff like that. well, a question is needed to be asked X).. as you can see on the attached picture i have added, there is a little annoying white box if the scroll-bars ARE going horizontal ect... is there a way to edit that part also?... right now i have following in my css style: ::-webkit-scrollbar { width: 10px;background-color:#333;}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;background-color:#333;}::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);background-color:#666;} is there something i need to add?, or something i just can add to the following i already has here?... thanks in advance!
  23. Hello guys...I couldnt find anything about this kind of background in w3school either here, in the forum, so I will post a couple of links where explain and develop the LINEAR and RADIAL gradients syntax. Anyone knows why there is nothing in w3school? I'm a newbie so maybe I couldnt find it, it is worthless or... but if there are others like me I hope it will be helpfull. C U
  24. This should really be basic but for some reason I can't get the background-image to do what I want :/ This is the link: http://webdesign.miad.edu/stimm/ The CSS for the image is: #wrapper{width:1024px;height:768px;} body{background-image:url(../images/bkg.png);background-repeat:no-repeat;width:1024px;height:768px;} And then of course, the wrapper is also in the HTML. I also have some JQuery and Javascript running to create the fade effect. Addt'l notes: I also tried to have no size on the wrapper and background-image, but it still stayed small. If I try to do "cover" as background size, it blows out the entire background and makes it huge. I wouldn't mind the background resizing with the window, but I haven't had much luck with that either. In any case, thanks for the help! -Steffane
  25. Hello, I need help with something i think is quite easy to solve maybe for the real experianced ones. I am a webeditor, but still not professional, and experianced with all sort of css layouts etc. So it about this site: http://mbdbygg.zxq.net/ . I have never maked a background/layout like this before, and am considering some other way to achive how i want it, but i guess i wont need to do it all over. So look at the site: http://mbdbygg.zxq.net/. When you open it in a normal fullscreen window it looks ok, and that is how it is suppose to look. When one minimize the window you can see that the pictures i nthe middle all moves outside the layout to the right on a white surface outside the wrapper! So does the links aswell. And the the "righttext" div moves to the left one. So what do i need to do for it not beeing like this. The divs - header, content, and footer are supposed to be fixed. Meaning there should be repeating the content and the foot and header, and not be pressed to the left like that. What do i need to do? I attach the css file as well. Thanks for any help! style.css
×
×
  • Create New...