I have this circle gradient in the top right corner of this webpage but I actually want this to come over the image.
Currently, I have this:
Whereas, I want this to be like here:
Here is my css code for the top-right-gradient:
.top-right-gradient{
position: absolute;
top: -40%;
right: -14%;
width: 800px;
height: 800px;
border-radius: 50%;
background: linear-gradient(#ee9ca7, #ec4357);
}
Simply make sure your image is a PNG file with a transparant background, or an SVG file without a background fill.
Related
In my angular project I have following task to do.
This is just a design template, not my actual code.
So far I have made the right picture by having a div and setting the background image.
But now I dont know how to put a dark layer on the page (like on the left side). The logic is no problem, but I dont know how to achieve it with CSS.
How do I do it?
You can do this really simply let's suppose you have a div and you can style according to following rules, you can also replace with your element id or css class with div:
div{
position:relative;
}
div:after {
position: absolute;
background: rgba(0,0,0,0.3);
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can put a div over your image and style it the way you want it to.
If you make it black and put opacity on the element, it will get more transparent, which makes it look like its a little darker
Note that you will have to have the z-index set accordingly for it to work.
example:
overflow: hidden;
height: 100%;
z-index: 2;
Alternative you could try to add a shadow with background: linear-gradient()
example:
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
I made an svg image for on my site. When I use it though it looks like this:
There is alot of transparent area around it where I would say it could expand.
There doesn't seem to be any transparent area in the svg image itself.
When I use a png it works fine, just with the svg it creates this blank area.
I just gave the image a red background to see where the image actually is.
This is my css:
#logo {
position: absolute;
left: 0;
top: 0;
background-color: red;
width: 200px;
height: 50px;
}
#logo directs to the <img> in my html:
<img src="Sources/FruityJuice Logo.svg" alt="FruityJuiceLogo" id="logo">
In Adobe Illustrator I cropped the file to the logo like Yong Pin said and that seems to have fixed it.
I have two background jpeg images that are repeated vertically across the entire left and right borders of my website.
Here is my code:
.gradients {
background-image: url("outer-gradient.jpg"), url("outer-gradient-horizontal-flip.jpg");
background-position: top left, top right;
background-repeat: repeat-y;
}
<body>
<div class="gradients">
<div> website content in here </div>
</div>
</body>
This is what it looks like:
left and right background images
I need a way to make both of these jpegs transparent.
Please don't suggest I just use CSS gradients, I cannot use CSS Gradients because of the color complexity needed to make the left and right images the way they were. These jpegs have hundreds of colors for a richer gradient than any CSS Gradient could make.
I've seen methods of making a single background image transparent by adding an opacity div in front or behind it. How would I do this for my .gradient div, when I have two background images?
I need a way to make both of these jpegs transparent.
As you can't simply give opacity to the gradients div, which would affect the website content as well, you could use pseudo elements, like this, which will not effect the website content
.gradients {
position: relative;
padding: 0 60px; /* for this demo, push the content off the image */
}
.gradients::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px; /* width of your jpg file */
height: 100%;
background-image: url(http://placehold.it/50/00f);
background-position: top left;
background-repeat: repeat-y;
opacity: 0.5;
z-index: -1;
}
.gradients::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50px; /* width of your jpg file */
height: 100%;
background-image: url(http://placehold.it/50/f00);
background-position: top right;
background-repeat: repeat-y;
opacity: 0.5;
z-index: -1;
}
<body>
<div class="gradients">
<div>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
</div>
</div>
</body>
I'm not sure what this means:
These jpegs have hundreds of colors for a richer gradient than any CSS Gradient could make.
If you can make them in Photoshop, you can make your gradients in CSS. A gradient is by definition hundreds of colors, as it transitions from one to another (and potentially another). The screenshot you've shared is definitely able to be reproduced using CSS gradients.
However, since you've asked to rule that out, I'd suggest using 24-bit PNGs instead of JPGs. 24-bit PNGs have an alpha transparency channel which would allow you complete control over how transparent they are overall, and how transparent they are per-pixel. There is no background-transparency property at this point, so what you're trying to accomplish can't be done with the HTML markup you have and CSS.
The third option is to have an empty div with opacity for your background:
<div class="gradients"></div>
<div>Website content here</div>
html { height: 100%; }
body { min-height: 100%; position: relative; margin: 0; }
.gradients {
background-image: url('left.jpg'), url('right.jpg');
background-position: top left, top right;
background-repeat: repeat-y;
bottom: 0;
left: 0;
opacity: .5;
position: absolute;
top: 0;
right: 0;
}
Codepen Link, with CSS gradients because I don't have your JPG assets but the effect is the same.
I can think of a couple of ways:
You should put them in separate divs and place these divs underneath the main container / wrapper. You can css-position them accordingly.
You could work with actual .png images that allow for a transparency gradient
You could work with a background image that already has both the gradients and the desired bg-color in one file. Then you could make it background-repeat: repeat-y; and background-size: contain.
Working Demo: http://jsbin.com/opokev/54
I'm working on having this image as the background image and also have a header as well, however, as the demo shows my header is cutting onto the image.
How can I correct this so that first the header draws and then the background body image draws. I still want to maintain the quality of the image as is without scaling it.
Here you go http://jsbin.com/opokev/64/
just changed top: 0 to top: 85px and it works.
Try using background-position.
background-position: 0px 85px;
Could do the trick :)
Or you could try just using this:
#background img {
width: 100%;
height: 100%;
position: absolute;
top: 85px;
left: 0;
z-index: -1;
}
I can't see any difference in these to backgrounds (thinking about scaling):
http://jsbin.com/opokev/54
http://jsbin.com/ijoyiy/2
Then again, I'm 2min away from sleeping and I haven't got my glasses on ;)
Remove the img tag and use background-image for the div#background. Then, set background-position to center 85px.
Combined CSS:
div#background
{
background:url('http://i52.tinypic.com/33xd1yu.jpg') no-repeat center 85px;
width:100%;
height:100%;
}
This will shift the background image down 85px.
I have a Background Image [through CSS], I want to Link a Specific Part of that Image like it says "Home" and I want to point it to my site's home.
I think the Image Mapping works only with normal images and I can't find a way to do it with Background Image [Actually I haven't tried.]
So Can anyone please tell me how to do that?
Thanks :)
Use a 1px transparent png over the background image
Set the size of the png to the size of the background or link you want to make
Now you can either just link that transparent png, or map it
If you're having trouble fitting the png in the space, float it or use position:relative to get the overlaying transparent image to where you need it.
Lets say we have
HTML
<div>
</div>
CSS
div
{
width: 100px; /*the same width of the background image*/
height: 100px; /*the same height of the background image*/
background-image: url("#image");
position: relative;
}
div>a
{
position: absolute;
top: 10px /*the distance of the "home" part of the image from the top*/
left: 20px /*the distance of the "home" part of the image from left*/
width: 10px /*the width of the "home" part of the image*/
height: 5px /*the height of the "home" part of the image*/
display: block;
}
div>a:hover
{
outline: 1px solid black;
}