Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #1083381

    Hi,
    I’ve been looking for a solution to get a full width image in the background of the whole site using the stretched layout.
    In the theme settings there are only logo, main content and footer areas to define the background image.

    So I need the CSS code for having the image in the background of the whole site and also using 3 images for the responsive resolutions (max-width 479, 767 and full width desktop size). Which image sizes do I need for the 3 images?

    Would this be the correct solution?

    Best regards,
    Dirk

    #1084870

    Hey Dirk,

    Sorry for the late reply. You can use something like this in Quick CSS for instance:

    html {
      background-image:url('https://your.site/image.png');
    }

    Best regards,
    Rikard

    #1084994

    Hi Rikard,

    thanks for helping.
    Could you please tell me which image sizes are the correct measures for the 3 current responsive resolutions? (big screen, tablet, smartphone)

    I’ll try something like this:

    html {
      background-image:url('https://mysite/image.jpg');
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: contain;
      -moz-background-size: contain;
    }

    And I need the media queries for max-width: 767px and also 479 px. Do I have to change the background-size to
    background-size: cover!important; for the smaller resolutions?

    Best regards,
    Dirk

    • This reply was modified 5 years ago by diggital.
    #1085807

    Hi Dirk,

    Your image need to be large enough to cover the width of the site, there’s no exact size for that. If you need media queries then you can see how to create those here: https://www.w3schools.com/csS/css3_mediaqueries_ex.asp

    Best regards,
    Rikard

    #1085822

    Hi Rikard,

    the code I tried above doesn’t work. I don’t see any background image and still a white background on the site. Do I have to change the theme settings to get the site transparent are something – so that the background image is showing up or do I make an error in reasoning?

    I want to use a huge image that covers every big screen without being repeated and also like to know the 2 other resolutions, because I want to change that image depending on the device. So for max-width: 767px I want to change the image to a smaller one:

    @media only screen and (max-width: 767px) {
      background-image:url('https://mysite/image-767px.jpg');
      background-size: cover!important;
      -moz-background-size: cover!important;
    }}

    Is this code correct? How can I get the background image visible?

    Best regards,
    Dirk

    #1086315

    Hi Dirk,

    You are not targeting an element, you only have a media query. Try this instead:

    @media only screen and (max-width: 767px) {
    html {
      background-image:url('https://mysite/image-767px.jpg');
      background-size: cover!important;
      -moz-background-size: cover!important;
    }
    }

    Best regards,
    Rikard

    #1086324

    Hi Rikard,

    thanks, yes I forgot the target, but why is the code in general #post-1084994 not working/showing the image?

    And what about this?

    I want to use a huge image that covers every big screen without being repeated and also like to know the 2 other resolutions, because I want to change that image depending on the device.

    Best regards,
    Dirk

    #1087082

    Hi,

    1.) Did you adjust the image url? Make sure that it correctly links to an image.

    2.) Mobile devices can actually have higher screen resolutions nowadays compare to desktops, so using a single image is usually enough for every devices. Just make sure that the images are optimized or compressed properly and on their smallest file size as much as possible.

    Best regards,
    Ismael

    #1087337

    Hi Ismael,

    of course I linked to the correct image file, but it doesn’t show up.
    And the image size: It must be the better solution to have 3 instead of using a very large one, even if it’s optimized?
    Furthermore I want to control the displaying details of the image, therefore 3 images

    Using an image with 2560 × 1600 px (30 inch) should be large enough to cover any screen?

    I hope you have an idea to fix the background image issue?

    Best regards,
    Dirk

    #1088105

    Hi,

    of course I linked to the correct image file, but it doesn’t show up.

    Post the actual css code that you’ve used in the private field.

    And the image size: It must be the better solution to have 3 instead of using a very large one, even if it’s optimized?

    Yes, but you have to create multiple css media queries for that.

    Using an image with 2560 × 1600 px (30 inch) should be large enough to cover any screen?

    You should probably consider resizing the images based on the most common screen resolutions used these days.

    // http://gs.statcounter.com/screen-resolution-stats

    As you may have noticed, 1366×768 and 1920×1080 are two of the most common screen of choice for desktop.

    Best regards,
    Ismael

    #1088112

    Hi Ismael,

    I posted the code in the private field. I’m very curious why the background image is not visible?

    Best regards,
    Dirk

    #1088483

    Hi,

    Thanks for the update.

    The site is currently on maintenance mode, so we won’t be able to see the pages without logging in. Please post the login details in the private field.

    Best regards,
    Ismael

    #1088521

    Hi Ismael,

    I posted the credentials in the private field.
    Hope this helps?

    Best regards,
    Dirk

    #1089321

    Hi,

    It’s not displaying because its being covered by the other sections, which have their own backgrounds. You have to apply the background directly on the sections or set the section background to transparent so that the html background shows through.

    Best regards,
    Ismael

    #1089343

    Hi Ismael,

    this was exactly what I was already asking for here #post-1085822
    So please tell me, where I can set the backgrounds to transparent, I couldn’t find it in the settings yet.

    In the theme settings I can only set background colors, clear it, but can’t set it to transparent?
    In the page settings of the Avia Layout Builder there is also nothing for transparency that I found. We used a grid layout and the only thing I found is a colour section setting referring to the main content of the theme settings.

    Could you integrate the site’s transpareny in the theme settings? Also the option of selecting a site wide background image would be great for future projects.

    Best regards,
    Dirk

    #1089802

    Hi,

    Not really sure if that’s a good idea, but you can use this css code to remove the default background of the elements.

    html, #scroll-top-link, .html_stretched #wrap_all, body#top, #main, .avia-msie-8 .av_header_sticky_disabled#header {
        background-color: transparent;
    }

    You may no longer be able to add a custom background to the cells if you add that css code.

    Best regards,
    Ismael

    #1089878

    Hi Ismael,

    this works now, but still doesn’t look that good. The image sizes I chose also don’t look as expected, that’s why I asked for the correct resolutions.
    My media queries don’t seem to work, it should be possible to see 3 different images when changing the browsser size, but I only see one image?

    What about this:

    Could you integrate the site’s transpareny in the theme settings? Also the option of selecting a site wide background image would be great for future projects.

    There was a page where one can post ideas for future implements…

    Best regards,
    Dirk

    #1090798

    Hi,

    You should set the background size from “contain” to “cover” if you want the image to cover the whole page.

    html {
        background-image: url(//co-creative-group.de/wp-content/uploads/2019/04/hintergrundbild-2560.jpg);
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
        -moz-background-size: contain;
    }

    You can also set it to 100% but that will distort the image a bit. The css media queries are not working because the code is invalid.

    @media only screen and (max-width:767px){background-image:url('//co-creative-group.de/wp-content/uploads/2019/04/hintergrundbild-767px.jpg');background-size:cover!important;-moz-background-size:cover!important}} @media only screen and (max-width:479px){background-image:url('//co-creative-group.de/wp-content/uploads/2019/04/hintergrundbild-479px.jpg');background-size:cover!important;-moz-background-size:cover!important}}
    

    The css doesn’t have a target or the “html” selector.

    Best regards,
    Ismael

    #1090841

    Hi Ismael,

    thanks, I set it to “cover” now and I can see the big image in the desktop size covering the whole page.
    I tried to set the target, but there is still no difference when changing the browser size. Could you please check again what’s wrong?

    @media only screen and (max-width: 767px { html {
      background-image:url('https://co-creative-group.de/wp-content/uploads/2019/04/hintergrundbild-767px.jpg');
      background-size: cover!important;
      -moz-background-size: cover!important;
    }}

    Best regards,
    Dirk

    #1090948

    Hi,

    There is a missing closing parenthesis in the css media query.

    @media only screen and (max-width: 767px { html
    

    … should be:

    @media only screen and (max-width: 767px) { html
    

    Best regards,
    Ismael

    #1091193

    Hi Ismael,

    it’s working now, thanks!
    So if there is no other solution for getting the transparency, this is solved.

    What about this:

    Could you integrate the site’s transpareny in the theme settings? Also the option of selecting a site wide background image would be great for future projects.

    Can you post the link where I can post my ideas for future implements in the Enfold theme?

    Best regards,
    Dirk

    #1091499

    Hi,

    Unfortunately not right now – as we are re-working the way we are handling the requests.

    Best regards,
    Basilis

Viewing 22 posts - 1 through 22 (of 22 total)
  • You must be logged in to reply to this topic.