I have a screenshot class similar to screenshots found on dribbble.com, when I hover over it I display a link icon. I made it responsive up untill the part where my background image(the link icon) stays the same size and it looks really large when I downscale the rest.
How can I make sure that the background img of the link-icon class downsizes aswell when I scale down the browser?
.screenshot .link-icon {
background: url("../img/icons/link.png") #fff no-repeat 50% 50%;
position: absolute;
padding: 8.02139037433155%;
border-radius: 100%;
position: absolute;
z-index: 1;
top: 39%;
left: 42.25352112676056%;
}
So I kind of need to make my background url image responsive. Hope I said it right?
You need to define the height for that purpose:
.screenshot .link-icon {
background: url("../img/icons/link.png") #fff no-repeat 50% 50%;
position: absolute;
padding: 8.02139037433155%;
border-radius: 100%;
position: absolute;
z-index: 1;
top: 39%;
left: 42.25352112676056%;
height: 1em;
}
Related
On some devices screens (laptop), I noticed on Chrome and Microsoft Edge browsers, there is line above my backgroungd svg image, on my top menu.
It looks fine if i resize the window, for example it looks good on mobile size screen. If i change the backround height seems to be solved but it will occur on other screen sizes.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-position-y: 2px;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
I add a printscreen of the error here
On firefox, it seems to be fine.
I wonder if the top line is not a part of the svg image. Unfortunatelly I am not a svg expert.
Thank you for help.
Try removing background-position-y from your css. So that the new CSS looks like this.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
When setting a background gradient to background-attachment: fixed it is suddenly cropped to 50% of the page width. It seems related to the position left: 50%. I wonder if this is a bug or if I'm using the CSS wrong here:
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
transform: translate(-50%);
}
.container.fixed-bg:before {
background-attachment: fixed; /* <-- This line causes the problem. Why? */
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
I know that I can bypass the issue by removing the styles left: 50%; and transform: ... but that's not a practical solution in my case. The container has an unknown left margin and the pattern needs to reach from edge to edge.
Does that mean my CSS is wrong? What CSS would display the fixed background pattern in full width?
Update
I notice that there is a different behavior across browsers:
The bug seems to be related to transform. Use margin instead
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
margin-left:-50vw;
}
.container.fixed-bg:before{
background-attachment: fixed;
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
I've got two divs .navigation & .entry-image
.navigation {
position: absolute;
top: 0;
width: 100%;
left: 0;
right: 0;
background-color: #008dd0;
background-blend-mode: multiply;
z-index: 100;
color: #fff;
background-size: cover;
background-position: top;
}
.entry-image {
height: 100vh;
background-size: cover;
text-align: center;
position: relative;
background-position: top;
}
The background aligns well on widescreen however set as size:cover, they do not stay aligned as they respond obviously.
I've experimented with background-size:100% - this does not work on 100vh as it repeats.
Any suggestion on how I can keep the backgrounds aligning while still maintaining 100vh on the parent container. This is all due to the .navigation having a multiply blend mode applied which is only required behind the .navigation div
codepen: https://codepen.io/lisa-jaffe/pen/jOErBBX
I hope I understood your question correctly. If so:
If what you're trying to achieve is to have a sort of overlay on top of the image then instead of trying to align 2 images, which is rather difficult, you can use a proper "overlay", which is far simpler.
What I did was remove the navigation image and instead use a background color with transparency. You get the same result as your code but without the alignment issues.
.navigation {
position: absolute;
top: 0;
width: 100%;
left: 0;
right: 0;
background-color: rgba(6, 84, 121, 0.7);
z-index: 100;
color: #fff;
height:300px;
}
.entry-image {
height: 100vh;
background-size: cover;
text-align: center;
position: relative;
background-position: top;
background-image:url(https://loremflickr.com/1680/1050);
}
<div class="navigation"></div>
<div class="entry-image"></div>
Here's a codesandbox if you need that instead
I use this loader spinner using css and jquery. I would like to blur the background exept the image from URL. Any idea ?
Css:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
background: url("http://enjoycss.com/bg-img/custom/107898-1py1ieu.1zm9.gif")
center no-repeat #33333308;
}
Js
<script>
$(window).load(function() {
$(".se-pre-con").fadeOut("slow");;
});
</script>
Thank you
When the gif is showing you can add a :before pseudo-element to the body. The blurry effect can be tricky to achieve, I'd recommend using a blurry PNG or a svg as background, in the snippet below I'm just using color:
body:before{
content:'';
background-color: #dbdbdb;
opacity: 0.7;
background-size: cover;
width: 100%;
padding-bottom: 100%;
position: fixed;
z-index: 1;
}
You can replace the body selector with a class and then with some jQuery remove or add the class to the body.
See this fiddle for reference: https://jsfiddle.net/3r1zc9gw/3/
i have a left admin panel which is set in percentage width. the problem is that i have a repeating background in it and when i use background-size to tuck-in the background image to the size of percentage-based width, the image just disappears in chrome. in firefox it works fine. But when i use ctrl - to zoom-out the display, the image appears.
the css of the left panel is:
.adminmenuback {
width: 30%;
background: url(../images/leftpanel_bg.png) left top repeat-y;
background-size: 100%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
pls help.
You can use 100% 100% for background size.
.adminmenuback {
width: 30%;
background: url(../images/leftpanel_bg.png) left top;
background-size: 100% 100%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
http://jsfiddle.net/aEJRB/
try this
background-size:contain;
background-size: cover;
Try this.