Hello Remote Doctor,
Not only is the position of the image not right, its size too is incorrect. On smaller windows, the text is not fully shown.
Unfortunately, I can't immediately see from the code on your page how you have sized the image, so let me just make some general remarks about creating responsive images. I will be using your image.
1. Always start with creating a container div for the image. Give the div a class name (see below), a position (fixed, absolute or relative), a percentage width, and a height (percentages for the width must be preferred, pixels for the height are okay). If you want to center the div, give it also margin: auto. If, in the case of a div that must be centered, you have chosen position: fixed or position: absolute, make the width for the div 100% or choose another percentage (for. ex 70%) and then add: left: 15% (100%-minus-70% divided by 2).
2. Put another div inside the container div and give it width: 100%, height: 100% and margin: auto (for centering). Also give this div a certain max-width because, depending on what image you use, it might extend too much to the left and the right, which would automatically make the image too 'short'.
Adding a background image for the div inside the container div is done by something like:
Code:
background-image: url(http://www.theatticbanwell.co.uk/images/fulls/welcome-to-the-attic.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center
(Other values for background-size and background-position are possible, but that's perhaps not relevant here).
3. Here's a possible application of the above lines:
Code:
<div class="responsive_img" style="position: relative; width: 70%; height: 400px; margin: auto">
<div style="width: 100%; height: 100%; max-width: 600px; margin: auto; background-image: url(http://www.theatticbanwell.co.uk/images/fulls/welcome-to-the-attic.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center">
</div>
</div>
The need for a maximum width for our image (max-width: 600px) becomes immediately obvious when we omit the maximum width. Try it: the image will be too big on wide screens, as a result of which parts of it will not be visible any more.
4. Finally @media screen code is required to solve possible problems that still may occur at certain window sizes. When we resize the window until it is less than 500px wide, the text on your image is not entirely visible anymore. We can solve this problem by stipulating that the image must be 100% wide at less than 500px:
Code:
@media screen and (max-width: 500px) {.responsive_img {width: 100%!important; }}
In fact, it turns out that this does not do the job for windows that are still smaller, so we also make the image shorter (the shorter the image, the more 'it shows':
Code:
@media screen and (max-width: 500px) {.responsive_img {width: 100%!important; height:350px!important}}
Note that the keyword !important is not needed if we replace all inline styles with a style sheet while making sure that the @media screen code is below the other css, like this:
Code:
<head>
<style>
.responsive_img {position: relative; width: 70%; height: 400px; margin: auto}
.responsive_img_inner {width: 100%; height: 100%; max-width: 600px; margin: auto; background-image: url(http://www.theatticbanwell.co.uk/images/fulls/welcome-to-the-attic.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center}
@media screen and (max-width: 500px) {.responsive_img {width: 100%; height:350px}} </style>
</head>
<body>
<div class="responsive_img" >
<div class="responsive_img_inner" >
</div>
</div>
</body>
I hope this helps.
Elite Coders
@media advice please
Posting Permissions
Reply With Quote
Bookmarks