Archived topic
Image span 100% (again)
7 replies · Started by Reto Suter on August 5, 2015
Hi
I did try some of the topics of this forum, but none worked for me.
I would like to have an image, on 100% of page width. I tried site with sections and without, image as background or head.
it should work on desktop and mobile.
GP-Version: actually, with all ad-ons
Website:
http://www.vtag.ch (image is in header)
http://vtag.ch/wp/weichen (image as backgroud in section)
http://vtag.ch/wp/?page_id=1200 (image as background in section, padding 400+, image is bigger than site)
thank you and regards
Reto
Give this CSS a try (for the image in header):
.page-header-image.grid-container {
max-width: 100%;
}
.page-header-image.grid-container img {
width: 100%;
}Let me know if that does the trick or not :)
HI
It does it, thank you!
Is it possible to have the same size and put text in it without auto-changing the size?
If i use the header text, it goes just as height as the text itself.
thank you
reto
To add text you'll need to add the image as a background image which gets tricky when it comes to sizing.
You can use padding to increase the height of the element, but you may need to add CSS to adjust the padding/background image on mobile and tablets.
There's no exact science when it comes to background images - just lots of tweaking and testing.
Hi
thank you for your reply. So i try some.
Regards
Reto
Background image position instructions, can you tell me or give me an example of what to put in the position input box, it is unclear to me as to what it requires? All of these parameters or one? can you give me an example please?
left top, x% y%, xpos ypos (px)
Background image position instructions, can you tell me or give me an example of what to put in the position input box, it is unclear to me as to what it requires? All of these parameters or one? can you give me an example please?
left top, x% y%, xpos ypos (px)
I would like my small logo(220pxx220px) to appear on the left hand side in the background.
Check out the property values on this page: http://www.w3schools.com/cssref/pr_background-position.asp
You can use any of those values :)