I know there are alot of questions for the same topic but I have tried almost everything to get it work but did not succeed.
I am working on a WP theme and I have a header background image which does not scale properly when on mobile/smaller screens.
If anyone can help me scaling for that image.
Also, as this image will be a dynamic image, should I use an image tag or inline css background image?
For a reference, please have a look on the following link.
header background scaling
Have you tried "background-size" property of css?
If yes, how did you gave the values in it? in percentage or in hardcoded px because this solution works perfectly for background images. In your header's css or wherever you are having this image, do it like this, or you an specify your own percentage values according to your requirement:
background-size: 100% 100%;
If it doesn't work, let me know or if possible, please share the code so that I can guide you better. Hope this will help.
Cheers!!!
Related
I want to make an image to fit the content.
Trimming transparent background will be needed if it is done with a photo editor.
Is there any way to deal with CSS?
Or do I have to edit image before using it?
Thanks in advance!
What I have researched about css feature:
object-fit: It was a little more about aspects
There is no such feature in CSS as far as I can tell.
However, there are two possible solutions fixing your problem.
If it has to be done for an already known image:
You could manually scale the image using background-size and background-position so it does only show the area of the image you need.
If it has to be done for an unknown image:
Using Javascript like this: https://ourcodeworld.com/articles/read/683/how-to-remove-the-transparent-pixels-that-surrounds-a-canvas-in-javascript
I’ve got a quick question that’s been puzzling me for a couple of hours today. On a site I am working on for a client-he wants a complex shape but with text over it. What I’ve done in the past is use a position absolute svg with custom styling and then the text is fine as is. But the problem I am facing is the box containing the text is not as large as the svg shape so flex box is not respecting it and thus bringing the whole site up going over the svg image. I can’t think of any solutions and could use a little bit of help!
Oh and this is done in react if that makes it easier or harder.
Thanks y’all!
If you want to have text over an image, you can try to set the image as a background of your container. From there you can change the size and position of your background. Add it on your css file
.customContainer {
background: <background-image>
}
Okay! Check this and try this [https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_background-image][1]
So up near the top in the CSS reset, I added an additional rule to set all image elements to be max-width: 100%. However, my images aren't resizing properly, especially the gallery. It's supposed to stay in a horizontal bar, however I can't for the life of me get it to work, and I have no idea why. I'm not familiar with responsive design in particular. I bought a book and still don't understand it. What am I doing wrong?
Thank you!
http://lrroberts0122.github.com/DWS/lab5/index.html
http://lrroberts0122.github.com/DWS/lab5/css/main.css
I can't see anywhere where you have specified what width the images should be. By adding img { width: 100%; } to your CSS it works for me.
Also you know you have included your CSS twice
I am trying to solve a bug in ie7/ie8 for multiple background images...
I know that in originally it doesn't support in ie's but i have googled some interesting stuff on web, for example, Cross-Browser Multiple Background
Basically it is of two images background but i want to have 3 images with the defined position and size of the images via css...
Fiddle code is not working in ie7/ie8...
http://jsfiddle.net/CsKhy/4/
Can anyone help??
Use nested divs for a crossbrowser-compatible solution.
Demo:
http://jsfiddle.net/CsKhy/5/
Note: background-size is not compatible in IE8 or lower, so maybe it's better using images instead of backgroundimages.
I use
<style>
.bgImage{width:100%;}
</style>
Right after the body tag and before any other code insert this
<img src="yourimage" class="bgImage"/>
Not ideal solution but is compatible and works, I have used it many times. (make sure your image is a large image to begin with otherwise it will distort on larger screens)
ok i need to make a whole background image so that it resizes with the window and keeps the same proportions
i need to do this only using css
does anybody know how i have looked but cannot find a working solution.
i tried some suggestions on here too but does not seem to work for me either
thankyou
You might want to read the article "Supersize that Background, Please!" on A List Apart. It presents "old" as well as modern techniques.
In order to do it in vanilla CSS, you cannot settle for less than CSS3 since both Background and Borders and Media Queries modules are required.
What you are asking for is not possible. Not with standard CSS2.0 and XHTML.
You can make an image tile, but not scale to fit your page.
The link you provided does just that, it repeats the image in a tile fashion. Background images do this by default.
Sorry, CSS can't stretch images. Only an <img> tag can do that. So you'll have to put one of those in the background.
Maybe you can do that with CSS3, I don't know, but even then browser support is not very good yet.
Here is an example of using a div (100% width + height) containing an img tag to use as the background, might be worth a look.
Try this technique: http://css-tricks.com/perfect-full-page-background-image/