how to display background image non-magnified
-
Hi,
On one of my pages I have inserted a custom background. However the page is displaying the image magnified so that the bottom of the image has been cut off.
Is there a way rectify this via css? I’ve tried different options of css editing but cant seem to get this right. One of the wordpress consultants in the live chat facility suggested an alternate to my css but he also indicated that it was not ideal.
The page I am needing help with is http://bbtafrica.co.za/conference-registrations/
If you look at the actual image you will see how much is being cutoff https://bbt108.files.wordpress.com/2015/05/regpage1.jpg. I’ve tried resizing the image but with no luck. I’m guessing this is going to be something that is staring at me but I cant seem to figure it out.For interest, the alternate code suggested was `body.page-id-2242 #main { padding: 30px; border-radius: 30px; background-image: url(‘https://bbt108.files.wordpress.com/2015/05/regpage1.jpg’); background-size: 100%; background-position: top; background-repeat: no-repeat; height: 2300px; text-shadow: none; font-family: samarkan; color: #000; }’
Hopefully I have been clear about what I need help with.
The blog I need help with is: (visible only to logged in users)
-
hi @sacredpath, I have tried this but it doesnt work. It somehow make the image double back on itself so that a portion of the bottom of the image is now displayed at the top. I have saved the change so you can see what I am referring to.
I have tried a few different options with this, no repeat etc but cant seem to get it right. -
Oh, sorry, that is because it isn’t set for no-repeat. Add this to that rule:
background-repeat: no-repeat;A word of explanation here: The size of the div where the image is placed can vary in length depending on the amount of content and/or the sidebar length. If you were to remove a widget from the sidebar, things would go wacky. Same if you add something that makes the content area longer (another widget or a bunch of text). Just something to keep in mind.
-
I am not at my PC right now so will try again in about 5 min but I did try that no repeat option previously. It solves the repeat issue in a way but doesn’t do anything about the actual image not displaying in full.
-
-
You do end up losing your corner radiuses on the image. Not sure there is anything we can do about that.
-
still the same problem. this is what my css is currently looking like:
`body.page-id-2242 #main {
padding: 30px;
border-radius: 30px;
background-image: url(‘https://bbt108.files.wordpress.com/2015/05/regpage1.jpg’);
background-size: contain;
background-repeat: no-repeat;
background-position: top ;
text-shadow: none;
font-family: Lucida Calligraphy;
font-size: 24px;
color: #000;
}’the full image is still not displaying.
-
the weird thing about this is that this page displays almost exactly how it should on the mobile theme, but unable to get it right on the desktop version… normally it works the other way around.
-
@sacredpath, I have decided for the time being ( due to time constraints – its 2am in my part of the world now ) I will go with the other css version that I was given but not recommended.
`body.page-id-2242 #main {
padding: 30px;
border-radius: 30px;
background-image: url(‘https://bbt108.files.wordpress.com/2015/05/regpage1.jpg’);
background-size: 100%;
background-repeat: no-repeat;
background-position: top ;
height: 2300px;text-shadow: none;
font-family: Lucida Calligraphy;
font-size: 24px;
color: #000;
} ‘if you are able to suggest another option, I would be most interested.
-
This is always going to be a problem when you have images of this nature that you want to show in their entirety on responsive design themes since you aren’t really in charge of the user’s browser window width/height, or the size of the device they are viewing your site on. The solution you are using is about the best you can hope for I think. Funny that when using the code I gave, it seemed to be nearly perfect on my desktop monitor, but sort of fell apart on smaller screens and you were seeing the opposite. The web can be fickle. :)
-
@sacredpath – thanks for your input. Agreed, the web is fickle indeed… I sometimes wonder how you coders stay sane.
Given the discussion above and the route i’ve taken, I do have another CSS question but to be fair, I have created a new thread. If you have time I would appreciate your input: Second thread with new question is here -
- The topic ‘how to display background image non-magnified’ is closed to new replies.
WordPress.com Forums 
