I am having issues with web design as image compression is an important factor, I have taken the photography for the website myself and opted to add a vertical gradient on the image banner which fades to transparency (in image post-processing). The issue is that in order to show the transparency I'm having to save the file as a type .png, but with png compression I am only able to get the image down to 1.5mb, which is not ideal at all...The only work around I can think would be to implement the fade on the image in CSS, but I need something thats browser compatible (exceptions for IE..). I haven't been able to find anything for this. Is there any CSS styling anyone knows of to accomplish this so that I can save the image as a jpeg. The desired outcome is below:
You can use a div, place it over the image and give it a gradient:
<img src="image.jpg" alt="" />
<div class="gradient"></div>
CSS:
.gradient {
background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
height: 200px;
margin-top: -200px;
position: relative;
width: 600px;
}
Live preview: JSFiddle
Related
I have been googling this for hours but none of the suggestions found are working.
I have a page banner which is light blue. On it I have placed a transparent png image file. The blue background does not show through, I just see the white/grey checkerboard effect where the transparency is.
It is pretty simple. I have a Div container defined in CSS and a class for the img. Here is the CSS
.header-column-small {
float: left;
width: 30%;
background-color: transparent !important;
}
.header-column-small img {
width:220px;
height: 150px;
object-fit: contain;
}
The background color is defined further up the chain in a parent div class.
And here is the HTML
<div class="header-column-small">
<img src="books-on-shelf-small.png" />
</div>
Here is how it looks
Screenshot
I have tried using background-colour: transparent in both the image class and the immediate image container (header-column-small) but no better.
Any help really appreciated
Many thanks
Mark
OK, hangs head in shame... :)
Turns out the PNG file was not a transparent background image at all. Just a warning to others that may be searching the net for images for their project. The sites that claim to be providing 'transparent' png files are not always doing so.
I should have looked for the obvious first before trying all sorts of code hacks to fix a problem that wasn't really there..
Thanks to those who replied so quickly to shine a light on my short-sightedness!
Cheers
Mark
The first thing I'd like to point out is that I know almost nothing about CSS. At the moment I'm trying to create a website using Wordpress and I want to add an image that acts like a link and which changes to another image when the mouse is hovering over it.
I found following tutorial for this: https://www.organicweb.com.au/17523/wordpress/image-link-css/
I've done exactly what this tutorial says (basically it's more or less just copy & paste), but my image won't show up and I have absolutely no idea why. Even stranger is that the image does show up when I use a definite image size in the stylesheet (for example: "width: 300px; heigth: 250px;"). But it doesn't work when I use "background-size: cover;", "background-size: contain;", "background-size: auto;" or any other possibility.
This works:
.ge-link {
background-image: url(http://.../wp-content/uploads/2017/02/325484_1280.jpg);
background-repeat: no-repeat;
background-position: center;
width: 300px;
hight: 250px;
display: block;
This doesn't work:
.ge-link {
background-image: url(http://.../uploads/2017/02/325484_1280.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: block;
Does anyone have an idea what I might be doing wrong?
what I guess you could do is to have both images together in your html and use :hover to show a different image once the main image is hovered:
HTML
<a id="linkId" href="www.yourlink">
<img class="image_on" src="yourFirstImage.png" alt="picture">
<img class="image_off" src="yourSeconfImage" alt="picture 2">
</a>
CSS
.image_off, .link-block:hover .image_on{
display:none
}
.image_on, .link-block:hover .image_off{
display:block
}
.ge-link is not an image tag, it's just a container that has a background image. In the second case, you didn't define a height for that container (also no width, but that's not the primary cause for your problem), so that container is 0 pixels high - no heigth! It actually contains the background image, but with 0 heigth it doesn't show anything.
So just use those width and especially height settings as long as you use the image as a background image. Or use a real image element (<img>).
P.S.: You can use the width/height settings and background-size: cover - works perfectly...
I need to create a footer with arched top side and it should have an outline too. I thought of using a image on the top and plain rectangle with the same bg color below it but I need it to be responsive on different devices. Is it possible with pure CSS without having to use different sized images? And cross-browser solutions please :)
I am not be able to post images here because I am new here, here you go: http://oi60.tinypic.com/vwf48.jpg
footer{
height: 100px; width: 100%;
background-color: grey;
border-radius: 50% 50% 0 0;
}
<footer></footer>
Here's a link to a Codepen.io example if you want to play around with it:
EXAMPLE LINK HERE
How can I get the background of a Responsive website to adapt and move with the rest of the content on the Website?
My background is split doesn't cover the entire background, only partially to create an effect where each sides are of a different color (gray).
However, when I change the size of the screen, all of the elements will be moved and the background will not be positioned as it was initially.
How could I go about making sure that no matter what the size of the window is, the "gray bars" will always fit with main content?
If you look at this picture, this is how it should look like:
Also here is the script for the background image as well as the site wrapping:
.gray {background:url(http://frenchegg.com/images/gray.png) no-repeat; height:100%;}
.lgr {background-size:85% 100%; background-position:center;}
.main-content p {
color:#555;
}
.site-wrap {
position:relative;
min-height:100%;
background-color:#ebebeb;
}
You can find the website here.
Ok, you're page may need a little restructuring, but I believe I have a solution for you.
Initially, the main problem stems from background size being set to percentage widths (note background-size is a css3 property and not fully supported... but thats another issue).
For a proof of concept and for you to see what you're going to have to change, try to following:
Remove the background on 'gray' (line 1880 in styles.css)
Apply inline rules to 'row' (NOT TO THE ROW RULE) on line 230 in the source so it looks like the following:
<div class="main-content">
<div class="row" style="
padding: 65px;
background: url(http://frenchegg.com/images/gray.png) no-repeat;
background-size: 85% 100%; background-position: center;">
The rules are as follows for copying purposes.
padding: 65px;
background: url(http://frenchegg.com/images/gray.png) no-repeat;
background-size: 85% 100%;
background-position: center;
Note the padding is a bit screwy, but it's simply to show you where your background needs to be to respond correctly.
Cheers mate,
GW
I'm looking for a way to use a part of a picture to use as a thumbnail without actually resize the image.
It's like you capture a part of the picture and show it as thumbnail
try using CSS overflow to limit the viewport in the div, like so
.preview {width: 60px; height: 60px; overflow: hidden;}
<div class="preview">
<img src="path to big image" alt=""/>
</div>
I think sprites are what you're looking for.
CSS Tricks has some posts on how to use sprites, so I'd refer you to that, maybe starting with the article CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
What you describe seems to be the use-case of the CSS clip method.
img {
position:absolute;
clip:rect(0px,60px,200px,0px);
}
img:hover {
clip: auto; /* 'un-clips' the image and displays it full-size */
}
The main caveat with this technique is that the element to be clipped must have position: absolute; to work.
See (in order of recommendation):
http://www.cssplay.co.uk/menu/clip_gallery
http://www.w3schools.com/CSS/pr_pos_clip.asp
Here's what you want to do... The DIV with the background image works, but that's a DIV. If you want it to still behave like an image layout-wise, you could get your hands dirty with "inline-block" and a matrix of browser incompatibilities, or you could simply use a transparent image with a background image on that. Construct a 1x1 pixel transparent GIF, say it's "pixel.gif." Then all you do is:
<img src="pixel.gif" width="40" height="40"
style="background:url(full_pic.jpg) -90px -90px no-repeat">
In this case 40x40 is your crop size, and (90, 90) is the offset into the full image where you grab the crop from.