www.webdeveloper.com
Results 1 to 6 of 6

Thread: CSS Background Image positioning

  1. #1
    Join Date
    Jul 2010
    Posts
    25

    Question CSS Background Image positioning

    I have created the a div (allservices) with the dimensions below, and require a background image. The background image is of dimensions 865 * 915px. The width of the background sits perfectly into the div, however, the height of the background image is 5px shorter than the height of the div, hence I wish to position it 2.5px down from the top of the div and 2.5px up from the bottom of the div.

    Style Follows:

    #allservices{margin-top:3px; margin-left:10px; height:920px; width:865px;
    background-image:url(someimage.jpg);

    /* the dimensions of someimage.jpg is as follows:

    height = 915px, width = 865px */

    background.opacity:0.25;
    background.filter:alpha(opacity=25);
    background-position:;
    background-repeat:no-repeat;
    }

    any ideas, solutions, and suggestions much appreciated along with any point outs of errors.

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    background-position: center;

    What's background.opacity?
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Jul 2010
    Posts
    25
    background-position: center; is for horizontal isn't it? i mean vertically centered but it seems to be fine!

    The background image consists of dark colors and you cannot see any of the text so background.opacity was just something i just tried referring to

    http://www.w3schools.com/css/css_image_transparency.asp

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    With regards to background.opacity, it doesn't work like that, there's no such thing.

    As for vertically and horizontally centering a background image, the actual rule is this:

    Code:
    background-position: center center;
    /* background-position: horizontal-position vertical-position */
    If you only have one property for the background-position rule, then it uses that value for both the horizontal and vertical positions.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  5. #5
    Join Date
    Jul 2010
    Posts
    25
    Cheers! much appreciation for that any ideas as for the opacity of the background image or would you recommend using something like photoshop because something that has come across my mind but i thought let me try some other ways

  6. #6
    Join Date
    Dec 2005
    Posts
    2,984
    I don't recommend photoshop because you'd have to save it as a PNG, and if it's reasonably detailed at all, a PNG that size would be massive (several hundred kb).

    What I would recommend, is using the opacity property, but just a little differently.

    Code:
    <div id="allservices">
      <div class="bg"><div>
      <div class="content">
        Content of all services
      </div>
    </div>
    Code:
    #allservices { margin-top:3px; margin-left:10px; height:920px; width:865px; position: relative;}
    #allservices .bg { position: absolute; top:0; left:0; right:0; bottom:0; opacity: 0.25; z-index: 1; background: url(someimage.jpg) center center no-repeat; }
    #allservices .content { position: relative; z-index: 2; }
    This is a common cross-browser technique to use a semi-transparent background image without affecting the transparency of the content.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

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