This is super, duper weird from my perspective.
I'm setting up a website where I have a banner. I set the background image using the background-image property.
My challenge is: when I have two images with same dimensions, it doesn't work when I load using own domain, but works on external domain.
MY CHALLENGE:
I have this banner on my page:
Background is set like this:
Now this is kinda weird, since the image actually works on this URL and instead I get a black background (no image):
If I use a different image from a third party URL that has exactly same dimensions:
And I replace this in the CSS:
Then everything is fine and the background works!
So my question is:
What on earth is going on? I obviously assume I've went crazy and need to go home and sleep since there must be something super obvious going on, but I need your help to tell me what's wrong with me.
The overlay effect hides your background image.
Kindly change the css
.overlay::after{
background: rgba(0,0,0,.5)
}
I hope this helps you
Related
I'm pretty new to cs and wanted to try and create a personal website for fun.
I've attempted many times to try and use an image from my files to be the background for my personal website. I tried to read up on how paths work but I can't seem to be able to set the background to the image.
Please check my github repository for all the code:
https://github.com/HarnoorDhillon/HarnoorDhillon.github.io
I just checked out your git repo and it looks like there's an error with your image. It's broken or something. But for the style.css you might want to put background-image: url("../images/IMG_1.png"); under the body instead of html as that is generally where that sort of stuff goes.
For example,
body {
background-image: url("../images/IMG_1.png");
/* Other stuff like background-color, font, etc.*/
}
Sidenote: That image is more than 3800 x 2600px and nearly 16MB, which is kinda huge, even for a full screen background image. You could comfortably half the dimensions (which would roughly quarter the file size/download time) with no discernible loss of visual clarity.
Basically, I want to display a screenshot of a website inside an iphone frame. And I also want this to be responsive.
I have a rough idea but wouldn't know the best way of positioning the image, I'd probably be using the 'overflow-y' css property and set it to scroll, and set the height, so that my long image will scroll inside the iphone frame, however my problem is getting the image to be the right size of the iphone. Is this some javascript witchcraft I'm yet to discover? thanks!
P.S. Don't say that 'this has been asked before and link this because none of the examples actually work so I can't understand it, and don't know if they're trying to achieve the same thing.
Would leave this as a comment, but not enough rep.
You should probably just try it out for yourself and then post your code if you're having any issues.
If you really have nowhere to start go to codepen and search for 'iphone'.
First if all I apologize if I have posted this in the wrong place.
I am working on a website for a customer and am getting to the stage where it is almost ready to be released apart from a few minor tweaks.
I am using wordpress to develop the website - I have never used wordpress before so I am kind of learning as I am going along and I am glad the customer understands that.
The problem I am having is related to the header image. I have uploaded a header image by going into Appearance->Header and picked an image that is stored on my hard disk.
The header looks really good on my PC however when I open the website on my phone the header image doesn't get scaled down and the writing on the banner (located on the left) just disappears so all you see is half of the header banner which doesn't look very good.
I am using Mantra as the theme and the responsiveness works fine on my phone but the header image is never re-sized.
I have spend some time on here trying other people's suggestions and the most common solution is found here: Link however I am not sure to which CSS file to add the code.
I would appreciate if somebody out there could point me in the right direction so that I can overcome this issue.
Try having the height of the image: height:100%; It may make it look a little stretched. Or you could make the image height taller and if its a background image the it will cut off what you need
Responsive use in header .. try this in your CSS
.header {
background-size: 50%, auto
}
change 50% with yours
edit :
use image as background-image
I have a div (.header) contained within other divs. When my page loads, momentarily just that one .header div "flashes" white as the page is loading, especially in in Firefox, but a little bit in IE8 too. I can't find what kind of CSS or lack thereof is causing this - there's no images or background color associated with that div. There is a logo.png within the .header. Thoughts?
http://dev.bwmsnow.co.nz/
From what I can see (Firefox on XP) it doesn't so much flash as it looks like it is slow to load the header-container div, and the associated background images. If I load without cache the whole of the logo bar loads last (and is white before load), but not just the one div. YSlow counts some 50 HTTP requests which might explain some of it. It doesn't look like the page is large so much as made up of a lot of pieces that probably create some processing lag.
If I understand the question, my suggestion is an old trick of adding a background color similar to the background image to <div class="header"> so that as the page loads (but before the image loads) the user sees a color similar to the background image. That way the visual impact of the image loading is not as noticeable.
I Photoshop eye dropped your background image and suggest using #a1dff8 as the color. The CSS for should be:
.header{
background:#a1dff8 url('images/yourheader.png');
}
Also, when looking at your code, I see that you have several external JS files. You should consider a minifier. Just Google or StackOverflow for JS/CSS minification.
I have a website that I am working on: http://keramed.com
in FireFox on my Mac the image on the main page shows up. (The Endoshield DSEK Graft Injector)
Now check in Safari and the image does not show up.
I have tried taking the original .PSD and saving it as a .jpg or .png and it does not matter.
I have commented out all stylesheets and this still does not solve it. The rest of my images are showing up, just not thing one.
I just dont understand I am stumped.
EDIT:> Photoshop says it is an RGB 8-bit image.
Your image isn't showing up in Chromium either. However, taking out the image width and height specified on the image element as percentages has fixed the problem. It is better to avoid using percentages as widths/heights for images as they may not render as well as you'd expect.
It's definitely not the image, as safari can render it, see: http://keramed.com/images/mainimage2.jpg
You are having over-flow: hidden, somewhere and I suspect it's that. Or if you are using js to change the display of the image from none to be shown, that might be failing.
I have had the same problem which I solved changing height/width in pixels rather than percentage.
Another reason for browsers do not display the image — 'content' parameter in stylesheets that are associated with the image.
For example, I faced with the same problem some time ago and it happened because into the stylesheet the class used for the image had 'content' parameter.
.image_class {
...
content: ''
}