Announcement

Collapse
No announcement yet.

How to reposition a backgound image

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to reposition a backgound image

    I uploaded a background image (world map) on my site... and now I am trying to slide it down a few inches below the header and nav bar.
    I am still trying to figure out how to use "hooks", but I am guessing that is what I need to do.
    I am not seeing a video for hooks or CSS to deal with image placement.

    My other question is if I don't like the image on all pages, is there a way to limit it to just a few pages?

    www.prokosch.us

    Thanks,

    Mark

  • #2
    Often you can use CSS for this
    div {background-position: center 100px;}

    This will position the image center and 100 pixels from the top of the container.

    To do this with selected pages, there are several ways.
    1. Add neccessary tags to Custom CSS,
    2. Easier way to create Dynamik Label with Conditional and and apply it to a Custom Hook box assigned as CSS. Then add your CSS to the hookbox.

    Comment


    • #3
      Sogwap, Thanks for your response. I tried the first option without any success. I guess I need to better understand CSS. What am I doing wrong? .

      site-description {
      padding: 0 0 0 20px;
      }

      div {
      background-position: center 250px;
      }

      The padding worked.

      Comment


      • #4
        You applied your background image to the body, so:
        Code:
          body {
                background: url("images/world-map.jpg") no-repeat fixed center 250px #ffffff;
         
         
          }

        Comment


        • #5
          SiGa, Sorry but I can't seem to make it work...
          Here is the CSS:

          .site-description {
          padding: 0 0 0 20px;
          }

          body {
          background: url("images/world-map.jpg") no-repeat fixed center 250px #ffffff;
          }

          What don't I understand?
          Last edited by mgprokosch; 02-07-2015, 10:14 PM.

          Comment


          • #6
            your url is to "images/world-map.jpg". The image isn't there. Try supplying the absolute url rather than a relative one. And double check the location of the image.

            Comment


            • #7
              The image was there when I wrote the CSS. Might have changed later...
              Now the site is under construction anyway, so there´s not much chance to help.

              Comment

              Working...
              X