I am simply trying to add a background image for a div. But some images show up and some don't.
I tried multiple ways like directly giving the image path in background-image property in css, importing the image in my jsx file and then setting it to the background image. The weird thing is that some images show up but some don't. At first I thought maybe its a problem with the file size or extension but I tried with two images with same resolution, same jpg extension and almost the same file size but one worked and the other didn't. Does anyone know why this happens and how can I fix it.
CSS
.features-container {
background-image: linear-gradient(
to right bottom,
rgba(57, 62, 70, 0.6),
rgba(34, 40, 49, 0.6)
),
url("../assets/ads2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
I have two jpg Images in my assets folder
Resolution of both images are 1920 x 1080, First image is 598kb while the second one is 531kb.
But when I change the url from the above css code to url("../assets/ads1.jpg"), it stops working.
The error was actually occurring due to the adblocker. I checked the request url the browser was using to get the images in the network tab of chrome dev tools and the status code of one of the images was (blocked:other). To solve the problem I simply disabled my adblocker and the problem resolved.
This happened because I had the word "ad" in my image filename and the adblocker was blocking it. If you want to further explore, why this occurs, the following post helped me a lot
https://stackoverflow.com/a/56048381
Related
i have a question about a file i wanted to upload to my personal web.
I added a jpeg fromat of my CV to my website but when i apply CSS style
.img-fluid {
max-width: 100%;
height: auto; }
it makes the jpeg blurry (it has a lot of text and it is quite annoying) i have this style on many different pictures and it does nothing to them, it seems to blurry only this one, i tried diiferent export, png etc nothing helps.
When i remove the class atribute in html it looks sharp and normal.(but then it dosnt scale on mobile devices etc.) The image size doesnt change when there is the style present it remains the same size.
What could be a problem here? I am using Microsoft Edge to view the webpage.
No blurr present
Blurr when defined style
I am building a website using wordpress and the theme is "Infinite Photography".
My problem is: on the homepage you see the featured images of all posts: www.konradfoerster.de/wordpress
When I change the size of the browser window, the images will be cropped from the middle. I don't want that.
However when you click on an image and open a single post and then change the size of the screen, the image scales but it does not crop. I want this behaviour for the homepage too!
I need the behavior like here: https://demo.kaliumtheme.com/photography/. Here when you make the browser window smaller, the images will be just scaled, not cropped.
How can I do this? I googled a lot, but could not find anything. For example I tried this one, but it did not work. disable cropping featured image in wordpress
Would appreciate any hints.
Edit: here is the screenshot of the document inspector. I think the styles, that apply for each image are in the class .acme-col-3.
screenshot document inspector
.masonry-item.post-item {
...
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Flex slider images are loading. I am able to see when I inspect element but they are
not showing up in the browser.
This is the link to the website: http://www.rgsandsons.com
Now I have found out that it's showing up at certain screen sizes, tried re-sizing the browser.
Why is it not showing for all screen sizes?
There is only a small but hard to notice problem, when you resize your browser flexslider shows an img tag instead of the css background it uses when on full screen for example.
The only thing you have to do is edit the name of the image as if you notice css background url and img src do not work the same when getting the images, if you remove spaces and make the name of the image clean without spaces and special characters (please also try and remove path white spaves) everything will be ok.
url(http://rgsandsons.com/image/cache/data/TEST SLIDER/3-1920x550.jpg) 50% 0 no-repeat
should be something like that:
url(http://rgsandsons.com/image/cache/data/TEST-SLIDER/3-1920-550.jpg) 50% 0 no-repeat
change folder name or upload on another folder, and remove special characters from image name.
This is certainly the issue here, so as soon as you make these changes everything will be fine.
I'm working on a printing template in the browser for print-to-pdf, and am using a transparent .png overlay in one section.
This happens both with transparent .png files and transparent .gif files:
Chrome, when printing (both to .pdf, and in the print preview window), seems to outline transparent images with a 1px gray line:
Exhibit A:
I've tried this in several other browsers (including Safari) and none appear to do what Chrome does. Has anyone seen this before? I need to find a way to disable it or hack it on the Chrome side so that this will work across browsers.
To see this in action, click here: http://jsfiddle.net/brandonscript/nELwd/ (just an <img /> tag) and press Cmd/Ctrl+P to bring up the print preview. You'll see this in the preview and if you print to .pdf. Make sure you have "Background colors and images" enabled, or you won't see any images.
Note: I'm not looking for workarounds after it's been printed and I'm aware that if you size the image to 100% and view the .pdf at 100% zoom you don't see the gray line. I need to programmatically (or otherwise) remove the gray line prior to printing the .pdf.
I have experimented enough and considered all the answers above while doing so.
Suspiciously, Upon saving your image and opening in gimp and some pokes into it, What I found was this.
Which makes me think that your image in truth, containing the gray border around it. My suggestion is you remove that layer and make that empty space around the actual image to transparent.
EDIT(response to #remus comment)
I do not know if my claim is correct, but I am believing that the image is not what you are expecting it to be. You need to correct that image. I have tested with another image of mine, pasted on the fiddle is not having any border around it in screen and print preview. (And the final pdf too). Sorry if this Answer is correct and hurts you.
Though I haven't come across this exact issue, I do a lot of work with css printing (for pdf and browser printing) and more often than not I have to use 2 images: 1 for screen and 1 for printing (do not use transparency for the printing one in yuour case):
<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay.gif' width='300' height='400' class="screen"/>
<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay_print.gif' width='300' height='400' class="forPrinting"/>
in your main css file:
img.forPrinting { display:none }
in your print css file which should be declared after your main css file:
img.screen {display:none }
img.forPrinting { display:block; }
Short Answer:
Change your PDF printing preset to a higher resolution.
you'll get:
The Long version:
I noticed you have re-sized the image by changing its width height properties in the HTML code.
So I made sure your image is exactly in the size you need it and it will not have this strange contour.
See Link: jsfiddle.net/cyVqw/
I have a print preview:
PDF screenshot:
To verify that in any size the PDF will keep your image transparency I checked
PDF saved in a Higher resolution preset i.e. "Print Quality". this resulted in a large file but with better zooming quality:
Here is High Resolution 33% preview:
High Resolution 200% preview
So, what you need to do is to adjust your PDF quality preset.
I've got a site which although not responsive, should just show a scaled version of the desktop site when viewed on iphone or ipad. The problem is that my main background image is being compressed for some reason. If I resize the browser I can't recreate this issue, so am just struggling to figure out what's going on iOS which is causing it. The site is - any help would be greatly appreciated!
Added info: the issue seems to be with div.bg-main and it's background image settings, set on line 243 of style.css
iOS has a 2 megapixel limit on background images. Your image is 1587*1340 = 2,126,580 pixels - a bit too much. It therefore shrinks it.
You can use the background-size property to fix the size back up to what you’re expecting. You’ll lose some detail but it’ll be the correct size. Add this to your CSS:
.bg-main { -webkit-background-size: 1587px 1340px }
You can chop your big image with 2 parts and add 2 backgrounds to a div.
Like this:
background: url(1.jpg) top center, url(2.jpg) bottom center
That image is huge, maybe that is the issue. Try reducing the size with 'save for web' (try getting the design to work with a .jpg).