dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Background and div conjunction

  1. #1
    Join Date
    Feb 2014
    Posts
    2

    resolved Background and div conjunction

    Here is my problem. I use 'fixed' background-attachment property of css property intead of 'local' as I need the picture to float and the effect I want to be gained is similarto 'local' property value of 'background-attachment' and to achieve the result when the fields of child elements within this div with background visually will be included. Please see attachments picture and code for detailed information. So, how to stretch this div background when minimizing window? Thanks in advance.
    HTML Code:
    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>Solar Activity</title>
      <style>
       div.center { background-color:#0000FF;background-image: url('images/bg1.jpg'); background-repeat:no-repeat;border-style:dashed; border-width: 3px; background-attachment:fix; width:1000px; background-position:center;}
      /* div.style_center { background-image: url('images/bg1.jpg'); background-repeat:no-repeat;border-style:dashed; border-width: 3px; background-attachment:fixed; width: 1000px; background-position:center; }*/
    
       @font-face { font-family: Tele-Marines; src: url('fonts/font.eot'); /* IE */ src: local('Tele-Marines'), url('fonts/TELE2.TTF'); /* non-IE */ }
       h3.logo{ display:block; margin-top:40; position:relative; border-style:dashed; border-width: 3px;  text-align:center; height:30px; font-family: Tele-Marines;  color:pink; text-shadow: red 1px 1px 1px; /*progid:DXImageTransform.Microsoft.DropShadow(color="#665522",offX=2,offY=2,positive="true");*/}
       div.menu { margin-top: 50px;/*border-style:dashed; border-color:#FF0000; border-width: 3px;*/ background-image: url('images/menu_trans.png'); background-repeat:no-repeat; height:69px; width:1000px;}
       div.sub {margin-top: 50px;display: block; background-image: url("images/contentBg.png"); background-repeat:no-repeat; background-attachment:scroll;  overflow-y:scroll; width:1000px; height:480px;}
       a.container {text-decoration:none; display: block; color:#FFFFFF; padding-top:9px; padding-left:5px; padding-right:5px; float:left; font-size:40px; }
       a.social1 {text-decoration:none; color:#FFCC00;}
       a.social2 {text-decoration:none; color:#00FFCC;}
       a.social3 {text-decoration:none; color:#FFCC00;}
       
     
    .wrapper{
       width:80%;   
    }
     
    .table{
       display:table;   
       width:100%;
    }
     
    .row{
       display:table-row;   
    }
     
    .col{
        display:table-cell; 
        border:1px solid black;
    }
     
    .c50{
       width:50%;   
    }
     
    .c25{
       width:25%;   
    }
    
    
       #i5 {color: red;}
    
      div#icon_mysp {/*background-image:  url("images/vk-icon.jpg"); width:32px; height:32px;*/}
    
         
      </style>
     </head>
     <body>
    <div class="center">
     
    <h3 class="logo">Solar activity</h3>
    <div class="menu"><a class="container" href="#">About</a><a class="container" href="#">Our projects</a><a class="container" href="#">Our Music</a><a class="container" href="#">Gallery</a></div>
      
    <div class="sub">Standard paragraph<br />
    	<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/22151639&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    	Standard paragraph<br />
    <!--
    	<div><div style="position:relative; float:left;border-width: 2px; border-color:green; border-style:dashed"> <a href="javascript: void(0)" 
       onclick="window.open('popup.html', 
      'windowname1', 
      'width=200, height=77'); 
       return false;">Click here for simple popup window</a></div>
       <div style="position:relative; float:left;border-width: 2px; border-color:green; border-style:dashed"> <a href="javascript: void(0)" 
       onclick="window.open('popup.html', 
      'windowname1', 
      'width=200, height=77'); 
       return false;">Click here for simple popup window</a></div>
       </div>
       <br /><div style=" width:100%; height:0px; clear:both;">.</div>
       <div>
       <div style="position:relative; float:left;border-width: 2px; border-color:green; border-style:dashed"> <a href="javascript: void(0)" 
       onclick="window.open('popup.html', 
      'windowname1', 
      'width=200, height=77'); 
       return false;">Click here for simple popup window</a></div>
       <div style="position:relative; float:left;border-width: 2px; border-color:green; border-style:dashed"> <a href="javascript: void(0)" 
       onclick="window.open('popup.html', 
      'windowname1', 
      'width=200, height=77'); 
       return false;">Click here for simple popup window</a></div>
       </div>
    -->
    
    <div class="wrapper">
        <div class="table">
            <div class="row">
                <div class="col c50">1</div><div class="col c25">2</div><div class="col c25">3</div>
            </div>
            <div class="row">
                <div class="col c50">4</div><div class="col c25">5</div><div class="col c25">6</div>
            </div>
        </div>   
         
        <div class="table">
            <div class="row">
                <div class="col c50">7</div><div class="col c50">8</div>
            </div>
            <div class="row">
                <div class="col c50">9</div><div class="col c50">10</div>
            </div>        
        </div>
    </div>
    	<p id="i5">Этот текст с ID 'i5'.</p>
    </div>
    <div align="left" style="margin-top: 10px;">
    
    <div style="border-width: 2px; background-color: #00CCFF; border-style: dotted;margin-left:60px; float:left;">
    	<div id="icon_mysp"><a class="social1" href="http://myspace.com"><img src="images/MySpace-icon.png" alt="myspace_icon" width="40px" height="40px" align="middle"/> на MySpace</a></div>
    	<div id="icon_fb"><a class="social1" style="display:block;" href="http://myspace.com"><img src="images/vk-icon.jpg" width="40px" height="40px" alt="VK_icon" align="middle"/>Ми на VK</a></div>	
    </div>
    <div style="margin-left: 90px;background-color: #FFCC00;float:left;">
    
    	<div id="icon_fb"><a class="social2" style="display:block;"  href="http://myspace.com"><img src="images/facebook-icon.png" width="40px" height="40px" alt="FaceBook_icon_copy" align="middle"/>Ми на FaceBook</a></div>
    	<div id="icon_tdj"><a class="social2" href="http://myspace.com"><img src="images/topdj_icon.png" alt="TopDJ_icon" width="40px" height="40px" align="middle"/>Ми на TopDJ</a></div>
    </div>
    <div style="margin-left: 120px; background-color:#CC00FF; float:left;">
    	<div id="icon_prdj"><a class="social3" href="http://myspace.com"><img src="images/icon_promodj_64.png" alt="PromoDJ_icon" width="40px" height="40px" align="middle"/>Ми на PromoDJ</a></div>
    	<div id="icon_soundcloud"><a class="social3" href="http://myspace.com"><img src="images/soundcloud-icon.png" width="40px" height="40px" alt="SoundCloud_icon" align="middle"/>Ми на SoundCloud</a></div>
    </div>
    </div>
    
    	
    	
    
    </div>
     </body>
    </html>
    http://imageshack.com/a/img46/5130/t8gw.jpg

  2. #2
    Join Date
    Mar 2011
    Posts
    1,156
    In your example, the CSS reads "background-attachment:fix;". Correct that to "fixed" and see what happens.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles