This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Replies

7
  1. Magus Staff 10 years, 8 months ago

    Hi Artvaz

    Please add the following to your custom CSS

    .page-id-253 #main {
    background-image: url("full/path/to/image");
    background-size: cover;
}

    This will add the image to the linked page only. To add to any other page you will need to find the page id. Using any modern browser, open the Developer tools (F12) or view the page source. In the body tag you will find the page ID in the class tag.

    If you need to alter the transparency please add this to the above snippet

    opacity: 0.8;

    Adjust as necessary.

    Let us know how you get on

    Magus

  2. artvaz 10 years, 8 months ago

    It worked on the page 253 but it didnt on the home page

    [.page-id-1573 #main {
    background-image: url(“http://qpuntto.com/wp-content/uploads/2015/05/restaurantes-12-toluca-metepec-qpuntto1.jpg”);
    background-size: cover;
    }]

    Do you know whats happening why it is not showing it????

  3. artvaz 10 years, 8 months ago

    It worked on the page 253 but it didnt on the home page

    [
    .page-id-1573 #main {
    background-image: url(“http://qpuntto.com/wp-content/uploads/2015/05/restaurantes-12-toluca-metepec-qpuntto1.jpg”);
    background-size: cover;
    }
    ]

    Do you know whats happening why it is not showing it????

  4. Magus Staff 10 years, 8 months ago

    Hi Artvaz

    This is not working because it is getting overridden by the settings in Appearance->Customize. You can resolve this by altering the CSS to this

    .page-id-1573 #main {
    background-image: url("http://qpuntto.com/wp-content/uploads/2015/05/restaurantes-12-toluca-metepec-qpuntto1.jpg") !important;
    background-size: cover !important;
}

    Magus

  5. artvaz 10 years, 8 months ago

    how can I set that the background width fix with the screen of the desktop or device the user is using?

  6. Magus Staff 10 years, 8 months ago

    Hi Artvaz

    Unfortunately you can’t. There is no way in CSS to set a dynamic height to a background image. If you used an image which tiled well top to bottom then you could do it by changing the background size attribute to ‘contain’ instead of cover which would scale the image based on the width of the device and force the image to tile vertically on smaller screens.

    Magus

  7. artvaz 10 years, 8 months ago

    thanks for that

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread