Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Double background colors

    Hey guys,
    Im a bit of a newbie to web..i do know the basics however.
    I need to design a page like the following image.


    How Do i get the double background color and the same positioning??

    And another question, If i were to want the line through the text like the poster posted, how would i go by doing that?


    thanks!!

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Does the page need to do anything? Do the colors need to change? Because if not, you could just set the image as the background. Otherwise, you'd have to make different divs and color them independently, setting the text over them with Z-index.

    Basically, a lot of code and headache.
    Last edited by Nerevarine; 10-03-2013 at 01:14 PM. Reason: Misspelling
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there beni_72,

    and a warm welcome to these forums.

    Check out the attachment, to see a possible solution.


    coothead
    Attached Files Attached Files

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    The bottom text is off because I do not know what font was used. That is also why it's positioning is off, but I think you get the idea.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    #wrapper{
    	width: 600px;
    	height: 927px;
    }
    #top{
    	width: 600px;
    	height: 232px;
    }
    #bottom{
    	width: 600px;
    	height: 695px;
    	background-color: #57CBF5;
    }
    #top_image{
    	position:relative;
    	top: 157px;
    	left: 50px;
    }
    #words{
    color: white;
    position:relative;
    top: 435px;
    left: 127px;
    
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="top"><img src="http://i815.photobucket.com/albums/zz74/sunfighter41/top_zpsa4e98f38.png" alt="top_image" id="top_image"></div>
    	<div id="bottom"><img src="http://i815.photobucket.com/albums/zz74/sunfighter41/bottom_zps4411578f.png" alt="bottom_image">
    		<div id="words">
    		<b>Tuesday August 25 at 8:00 PM</b><br /><br />
    		Brand School of Design<br />
    		The LaPorle Auditorium<br /><br />
    		<b>Free Admission</b>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

  • #5
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    You can use two divs with different background colors.

    If you're going to use background images, you'd probably want to use 2 background images that have a 1x1 dimension and repeat. I'm not entirely sure why you would use that option though when you could avoid using images.

    You can also use gradients with overlapping color-stops.
    My signature :)

  • #6
    New Coder
    Join Date
    Oct 2013
    Location
    Bangalore, Karnataka
    Posts
    43
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    try do this code as multiple,

    .multi_bg_example {
    background: url(http://demos.hacks.mozilla.org/openw...firefox-48.png),
    linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
    url(http://demos.hacks.mozilla.org/openw...-pattern.jpg);
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: bottom right, left, right;


  •  

    Posting Permissions

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