I am building an information website for a client who is hosting an MUN in their school. I'm using Weebly for this because the client wants to be able to control their data themselves, so they need an easy interface. On the homepage, I have used the landing-page format to have the MUN logo float over a background image.
As you can see, there's an ugly white background in the logo. I attempted to fix this by editing the JPG in PS, removing the background and saving as PNG. I then uploaded the PNG:
and wrote it into the website's CSS like so:
.landing-page #banner {
padding: 0;
}
#bannerleft {
float: right;
width: 400px;
}
.landing-page .wsite-header {
width: 400px;
height: 300px;
background: url(logo.png) no-repeat;
}
However, despite the image being a PNG with a transparent background, the image on the website still had a white background. The slight changes in the image were apparent, so I knew that the chosen PNG had been rendered, but yet the background remained the same. I suspect it has something to do with the container behind the image showing through.
How can I make the background image show through the logo using PNG transparency?
Related
I'm building a website where I use SVGs images for the main background, this SVGs are splitted in 3, the header, the main background and a divisor, the idea is make them looks like just one svg, for desktop the display of them is good, the problem comes in mobile, where in some widths the "browser" or the SVGs start creating little white lines between them (See link picture, the painted zones be for confidentiality agreement)https://flic.kr/p/2naLed2
I tried searching questions already asked about this problem, the first solution that I tried is to give to the SVG's a negative margin top, this works for one of the illustrations, but the other one keeps showing the white lines. I think the problem is about the rendering of the SVGs or something like that, but I can't find a working solution. I'll let the SASS for that part of the website.
The main illustration and the divisor are on the page on img tag
.main-ilustration {
margin: 0;
background-color: #07070f;
.ilustration {
width: 100%;
margin-top: -1px;
}
.ilustration-divisor{
margin-top: -2px;
margin-bottom: -1px;
}
}
and the SASS for the header
header {
background-image: url(../Pictures/Banner-Header.svg);
background-repeat: repeat;
.container-fluid {
padding: 1rem 2rem;
}
}
the suitable solution I can provide is that you need to remove the background from the SVGs files in illustrator and then just set the black background-color to the body.
Here's my site on github pages: https://anacondazz2.github.io/Personal-Website/.
Currently I have w3schools' image as a test thinking that my original image was too large (970kb compared to 30~ for wschools'), however if you visit my site on a phone it still doesn't show.
If you visit this site - https://www.w3schools.com/howto/tryhow_css_fullpage_demo.htm on a phone, the bg image shows.
I've copied the exact code from that site which is
.home {
position: relative;
height: 100%;
background: url(https://www.w3schools.com/howto/img_parallax.jpg) no-repeat fixed center;
background-size: cover;
}
into my own site, but for some reason it still doesn't work. Been trying to solve this for weeks now, any help is appreciated.
Edit: I've changed the bg image to the original.
You must set width and height properly.
I created a responsive box for my site (http://www.to-hawaii.com/trees) and it works fine except one thing. See here http://www.to-hawaii.com/page.jpg on the left and right side of the title there is a gap and I cant figure out how to fix. I figured the problem comes from line style.css 525
.images_tabbox {
max-width: 495px;
width: 100%;
float: left;
background: transparent url("/theme/images/images_tab_box_mid.jpg") repeat-y scroll center top / 100% 100%;
}
When I remove float:left; this particlar issue is fixed but then the whole box looks like this http://www.to-hawaii.com/page2.jpg
I would appreciate it if someone has any ideas how to fix this. thanks!
It's because your image(s) have a solid white background. The white on the left and right is part of the actual jpg. To fix it you have to save your image again from the source (hopefully you have access to the source design files) with a transparent background as a png or gif format. jpgs can't have transparent backgrounds.
I am starting a new webpage at draincleaningphx.com, and the eagle image on the homepage using Chrome still displays the transparent background as white. Ive tried the image saved as both png and gif file. I've read about using css to make the background transparent but can't figure it out.
Any ideas? Thanks.
The Eagle image is transparent.
If you put any other color in the CSS for the content:
#content {
float: right;
width: 640px;
margin-right: 30px;
background-color: #000;
}
for example black, you can see, the image is transparent.
If you want to add the shadow to eagle, you need edit to picture with shadow around the eagle :D
Did you just open the image in the browser or did you embed it in a HTML file / defined as background-image?
i have created a sprite image for all my images being used in the website(.png,.jpeg,.gif)
earlier when i was using imageurl to get the images.. the quality of the image for example the calendar icon to display the calendar.. was good.. and perfect
however when i have started getting the images.. using a css file .. by using background:image url(path and position of the sprite image).. the quality of the image deteriorates..
i have tried creating my sprite image in all possible formats..!!..
is there any solution to maintain the quality and still get the images through the sprite generated image!
CSS for an image:
.sprite-calendar
{
background: url(images/csg-4d4146d95bbab.png) no-repeat top left;
background-position: -480px -1249px;
width: 16px;
height: 16px;
}
Are you by any chance, scaling the image using CSS? You shouldn't be doing that as it will reduce the quality.