Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jamie 6 posts 76 karma points
    Feb 14, 2018 @ 10:10
    Jamie
    0

    Page image showing incorrectly

    I am having trouble with an image that I am trying to cover the whole screen, I have put in the below code:

    <div style="height: 100%; width: 100%; background: url('/media/1652/6-myimage'); background-position: center; background-attachment: fixed; margin: auto; top: 0; bottom: 0; left: 0; right: 0; background-repeat: no-repeat; background-size: cover;"></div>
    

    But the image is still not showing full size, some of it is getting lost on the right hand side. Additionally, when I put text aligned to the right some of it gets lost too!! When I switch between different outputs; the tablet and phone show all the text but the computer doesn't!

    Can anyone help?

  • Alex Brown 95 posts 435 karma points
    Feb 14, 2018 @ 11:42
    Alex Brown
    0

    Is it because your inline style is missing the suffix of the image type?

    E.g. something like background: url('/media/1652/6-myimage.jpg');

  • Jamie 6 posts 76 karma points
    Feb 14, 2018 @ 11:45
    Jamie
    0

    Hi Alex, no it is there, I edited that bit and accidentally took out the .png! Oopsy!

  • Alex Brown 95 posts 435 karma points
    Feb 14, 2018 @ 12:15
    Alex Brown
    0

    When you say it's getting lost off the right hand side then it sounds like you want to use "background-size: contain" rather than "cover".

    Doing this will display your image on the screen so that it all fits inside, however if your image has a different ratio to your screen then you'll get white spacing above and below the image.

  • Jamie 6 posts 76 karma points
    Feb 14, 2018 @ 12:23
    Jamie
    0

    Basically what I am essentially trying to do is create a custom 404 Error page that covers the whole screen and is not linked to my root template, all I want is an image in the background and some text on the front. Am I maybe getting the standard image size wrong? Is that why it is not spanning across the whole screen if the code looks correct?

  • Mike Masey 15 posts 172 karma points c-trib
    Feb 14, 2018 @ 12:34
    Mike Masey
    0

    I put together a quick codepen to break down your example to see if i could replicate the issue from a frontend perspective and it seems to work fine for me. I've put the image inside a fixed position div for the example.

    Could there be something happening in the code surrounding the background image that could be causing the issue?

    https://codepen.io/MMasey/pen/WMEBjq

  • Jamie 6 posts 76 karma points
    Feb 14, 2018 @ 12:43
    Jamie
    0

    Thanks Mike, that was my thought, could it have something to do with the code in my template?

    enter image description here

  • Mike Masey 15 posts 172 karma points c-trib
    Feb 14, 2018 @ 12:53
    Mike Masey
    0

    It's a bit tricky to tell without seeing everything in context from a front end perspective. I would suggest breaking it down a bit. Remove the text part of it for the time being and focus on getting the background image covering the entire page.

    If that's all you have in the DOM, then you will need to make sure the <section> is filling the entire screen, which you could do using the approach i took in my codepen, or something similar (as with most things web related, there are a multitude of ways to achieve the same result).

    Once you have that positioned how you want, then you can focus on the <div class="container"> content and it's children using something like absolute positioning, flexbox or CSS grid depending on your browser support requirements.

Please Sign in or register to post replies

Write your reply to:

Draft