2 Replies - 1059 Views - Last Post: 11 June 2013 - 01:28 PM

#1 troyb408  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 18-August 12

Center image in div tag

Posted 21 May 2013 - 05:53 AM

Hello -

I'm trying to center an image in a div tag and place it on the left side of the page with out the image repeating over. Let me try to explain I have a main container thats 50% of the page in the middle then I want to containers on either side both containing an image sort of like a full screen background. Below if I take out the back ground repeate the image repeats itself from top to bottom. I just want one image centered. I dont really care if the sides of the image are cut off but I'd like it to be centered. I've fiddled with absolute position and fixed position, background-size cover. Figured I know somebody would least be able to point me in the right direction.

Thanks

.left
{
background-image: url(someimage);
position: absolute;
top: 0
left:0
background-repeat: no-repeat
height:100%
width:25%
}



Is This A Good Question/Topic? 0
  • +

Replies To: Center image in div tag

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,874
  • Joined: 12-December 12

Re: Center image in div tag

Posted 21 May 2013 - 06:18 AM

Your css is wrong; there should be semi-colons between each rule.

Why are you guessing - position: absolute, etc..? Why don't you study some basic css to discover how to do this correctly?

You need background-position. http://reference.sit...ground-position

This post has been edited by andrewsw: 21 May 2013 - 06:20 AM

Was This Post Helpful? 0
  • +
  • -

#3 troyb408  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 69
  • Joined: 18-August 12

Re: Center image in div tag

Posted 11 June 2013 - 01:28 PM

Wasnt that i was guessing I just didnt have the css code in front of me and was trying to remember exactly what it was. But what I was missing was the css value min-height:100%. Adding that then a back-ground image to a div and positioning the div's i was able to stretch the image.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1