0
Welcome Guest! Login
0 items Join Now

SOLVED setting image as a background for a div

Last Post
Search Topic
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    SOLVED setting image as a background for a div

    Posted 12 years 1 month ago
    • Hi,

      I'm trying to set an image as a background for the main body DIV.

      The image needs to scale to fit the div and be vertically and horizontally centred . Overflow can be hidden on all sides.

      Within the div, there needs to be a 25px padding on all sides, then the inner div has a background colour with a 0.2 opacity.

      Within that div is the component area where the articles are published, again, with a 25px padding on all sides.

      You can see the problem I am having here:
      betelec.ergonomiq.net/societe/offres-d-e...esponsable-de-projet

      On this page, the article is an accordion and when it expands, the background image doesn't scale to fill the space and there is whitespace.

      Also, on this page:
      betelec.ergonomiq.net/societe/charte

      The default article length is longer than the image height, so the background again doesn't scale to fill the div and there is whitespace created.

      I can change the image and place a much larger image that can scale down to fill the available space as needed. However, the image cannot tile.

      Finally, the inner divs extend beyond the container div and so the content is getting cut off on the right.

      In my style.less I have the following code:
      body {
    &.menu-offres-d-emploi,
    &.menu-liens,
    &.menu-envoyer-votre-cv,
    &.menu-collaborateurs,
    &.menu-nous-contacter,
    &.menu-charte,
    &.menu-qui-sommes-nous,
    &.menu-services {
        #rt-main [class*="grid"] {
            & > div.rt-block {
                background-image: url(../images/backgrounds/blur.jpg);
                background-size: fill;
                position: relative;
                background-position: center;
                background-repeat: no-repeat;
                height: 100%;
                width: 100%;
                overflow: hidden;
                margin: 0;
                padding: 25px !important;
                // padding-bottom: 0;
                // margin-bottom: 0;
                & > div#rt-mainbody {
                    background: rgba(0, 168, 143, 0.2) !important;
                    overflow: hidden;
                    color: @white;
                    article.item-page {
                        padding: 25px;
                    }
                }
            }
        }
    }
}
    • Last Edit: 12 years 1 month ago by Ali Samii.
    • Thank you.

      Ali Samii
    #942845
    • cdavis411's Avatar
    • cdavis411
    • Preeminent Rocketeer
    • Posts: 17787
    • Thanks: 882

    Re: SOLVED setting image as a background for a div

    Posted 12 years 1 month ago
    #942864
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    Re: SOLVED setting image as a background for a div

    Posted 12 years 1 month ago
    • Hi Christopher,

      I tried that and it does work to some extent but the right side issues remains (i.e. the padding-right on the div.rt-block and on article.item-page don't take hold.

      The result is supposed to look like this mockup:

      This image is hidden for guests.
      Please log in or register to see it.
    • Thank you.

      Ali Samii
    #942870
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    Re: SOLVED setting image as a background for a div

    Posted 12 years 1 month ago
    • any chance someone has an answer to this?
    • Thank you.

      Ali Samii
    #943053
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: SOLVED setting image as a background for a div

    Posted 12 years 1 month ago
    • perhaps this helps?

      div#rt-main div.rt-container [class*="rt-grid"] div.rt-block {width: auto;}
    #943065
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    Re: SOLVED setting image as a background for a div

    Posted 12 years 1 month ago
    • Perfect...did exactly what I needed to have done. Thank you both Christopher and Henning.
    • Thank you.

      Ali Samii
    #943099
    • cdavis411's Avatar
    • cdavis411
    • Preeminent Rocketeer
    • Posts: 17787
    • Thanks: 882

    Re: SOLVED setting image as a background for a div

    Posted 12 years 1 month ago
    • Happy to help :cheesy:
      But Henning is the superstar around here
    #943566
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    Re: SOLVED setting image as a background for a div

    Posted 12 years 1 month ago
    • Hi Christopher,

      Each of you have your own special place here. We all benefit.
    • Thank you.

      Ali Samii
    #943680

Time to create page: 0.071 seconds