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!
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.
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?
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?
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.
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:
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?
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');
Hi Alex, no it is there, I edited that bit and accidentally took out the .png! Oopsy!
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.
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?
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
Thanks Mike, that was my thought, could it have something to do with the code in my template?
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.is working on a reply...