I have a div that will be the header of the site I'm working on that is a custom shape. The issue I am having is that the header needs to resize horizontally while retaining the integrity of the border radius and curves that are part of the shape. The problem with just using a transparent div with the shape as a background SVG is that when the window is resized, the integrity of the border radius and the angled section of the graphic are lost, meaning they get distorted into another shape. Here is an image of the shape:
The initial way I attempted to create this element was by placing it as an SVG, and resizing one of the line segments of the SVG in Javascript, but the performance on this was very poor, it was overly-complicated, and it was difficult to get the sizing correct.
The closest I got to the desired result was by cutting the right side tail of the SVG and using it as an :after element, which gave me the horizontal fluidity I was looking for, but encountered issues with matching the border color of the div and the stroke of the SVG. The div uses a translucent white background and a translucent colored border. Since the border is technically "on top" of the white background, the resulting color value is dynamic depending on the background of the page. This makes it difficult to match the stroke of the SVG and the border color of the div. There was also an issue where a vertical line would show up at different resolutions between the div and :after SVG element. You can see in the picture below that this method is not ideal, the SVG border color and width does not match the div on the left, and if you look closely there is a gap between the two elements (much more visible on a dark background which the site will be using).
body {
background-color: black;
margin: 10px 20px;
}
.header {
background-color: rgb(217 217 217 / 0.5);
border: 3px solid rgb(122 112 158 / 0.5);
border-bottom-left-radius: 24px;
border-right: none;
display: block;
width: calc(100% - 305px);
height: 60px;
position: relative;
}
.header:after {
background-image: url("data:image/svg+xml,%3Csvg width='308' height='65' viewBox='0 0 308 65' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.00179921 3.00586H293.755C296.737 3.00586 299.597 4.08424 301.706 6.00378C303.815 7.92331 305 10.5268 305 13.2414V22.7809C305 25.4955 303.815 28.099 301.706 30.0185C299.597 31.938 296.737 33.0164 293.755 33.0164H126.396C75.9048 33.0164 52.8027 61.9625 0 61.9625L0.00179921 3.00586Z' fill='%23D9D9D9' fill-opacity='0.5'/%3E%3Cpath d='M293.755 0.00585938C297.447 0.00585938 301.037 1.33813 303.726 3.78519C306.424 6.24078 308 9.6351 308 13.2414V22.7809C308 26.3872 306.424 29.7815 303.726 32.2371C301.037 34.6842 297.447 36.0164 293.755 36.0164H126.396C101.996 36.0164 84.1741 42.9185 65.6587 50.0893L65.1482 50.287C46.4357 57.5333 27.0057 64.9625 9.15527e-05 64.9625V61.9625C1.01084 61.9625 2.01071 61.9519 3.00009 61.9311C28.1433 61.4023 46.5167 54.2861 64.6923 47.2465C83.1648 40.0919 101.433 33.0164 126.396 33.0164H293.755C296.737 33.0164 299.597 31.938 301.706 30.0185C303.815 28.099 305 25.4955 305 22.7809V13.2414C305 10.5268 303.815 7.92331 301.706 6.00378C299.597 4.08424 296.737 3.00586 293.755 3.00586H0.00189066L0 0.00585938H293.755Z' fill='rgb(122 112 158 / .50)' /%3E%3C/svg%3E%0A");
content: "";
background-size: contain;
background-repeat: no-repeat;
width: 310px;
height: 66px;
left: 100%;
top: -3px;
position: absolute;
}
<div class="header">
</div>
You were on the right track with splitting up the image. You could either split the png you provided in your example, or if you have access to the tools, you could make three svgs.
Using the png you provided as an example, I made a new image 50px wide starting from the left. I made a second image 500px wide starting from the right. Finally, for the center, I made a third image that was only 1px wide taken from the horizontal center of the provided png. That 1px can be repeated horizontally to give the illusion that it is one image.
There are many ways to assemble them for the header. You could use a table, a grid, divs with positioning and float. I chose to use flex.
body {
background-color: black;
margin: 10px 20px;
}
.header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 96px;
}
.header_left {
flex-grow: 0;
background-image: url("h_left.png");
background-repeat: no-repeat;
width: 50px;
max-width: 50px;
min-width: 50px;
}
.header_middle {
flex-grow: 1;
display: block;
background-image: url("h_mid.png");
background-repeat: repeat-x;
}
.header_right {
flex-grow: 0;
display: block;
background-image: url("h_right.png");
background-repeat: no-repeat;
width: 500px;
max-width: 500px;
min-width: 500px;
}
<body>
<div class="header">
<div class="header_left"></div>
<div class="header_middle"></div>
<div class="header_right"></div>
</div>
</body>
I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.
Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course
link: g-floors.eu
Code I have so far (content part)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
If you want the same image to scale based on the size of the browser window:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Do not set width, height, or margins.
EDIT:
The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.
by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
Try this :
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
CSS:
background-size: 100%;
That should do the trick! :)
Here is sass mixin for responsive background image that I use. It works for any block element. Of course the same can work in plain CSS you will just have to calculate padding manually.
#mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
#include responsive-bg-image(204, 81);
}
Example http://jsfiddle.net/XbEdW/1/
This is an easy one =)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Take a look at the jsFiddle demo
Here is the best way i got.
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
Check on the w3schools
More Available options
background-size: auto|length|cover|contain|initial|inherit;
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
I used
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
which worked really well.
Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
More complicated method:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
You can use this. I have tested and its working 100% correct:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
You can test your website with responsiveness at this Screen Size Simulator:
http://www.infobyip.com/testwebsiteresolution.php
Clear Your cache each time you make changes and i would prefer to use Firefox to test it.
If you want to use an Image form other site/URL and not like:
background-image:url('../images/bg.png');
//This structure is to use the image from your own hosted server.
Then use like this:
background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Enjoy :)
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#res_img {
background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 1px solid red;
}
#media screen and (min-width:300px) and (max-width:500px) {
#res_img {
width: 100%;
height: 200px;
}
}
</style>
<div id="res_img">
</div>
If you want the entire image to show irrespective of the aspect ratio, then try this:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
This will show the entire image no matter what the screen size.
background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
or
background-size:100%;
Just two lines of code, it works.
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
Adaptive for square ratio with jQuery
var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;
if(HW<1){
$(".background").css("background-size","auto 100%");
}
else if(HW>1){
$(".background").css("background-size","100% auto");
}
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;
the position property can be used to align top bottom and center as per your need and background-size can be used for center crop(cover) or full image(contain or 100%)
I think, the best way to do it is this:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
In this way there's no need to do nothing more and it's quite simple.
At least, it works for me.
I hope it helps.
Try using background-size but using TWO ARGUMENTS One for the width and the other one for the height
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width
// and the second will be the height.
background-position:center;
I have a webpage like the following:
I am trying to add a small background image in the marked section below:
I tried the following code for the DIV
.king {
background-image: url(../img/banner-lg.jpg);
}
<div class="king">
</div>
But the background image is not coming into display, can anyone help me with this.
try to write like this:-
.hero-image {
background-image: url("/images/photographer.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
As you can see in my snippet if you set some width and height static to the div, the image is showed up.
Be sure that your div has height so he can show your image.
Be sure that the image url() is corrected, did you try to show an external image like http://via.placeholder.com/200x200
.king {
background-image: url("http://via.placeholder.com/200x200");
/*If you comment background-repeat the image will be repeated*/
background-repeat: no-repeat;
width: 500px;
height: 500px;
/*if you comment width and height you just see a grey line taken by <p> tag
if you comment the <p> you don't see nothing*/
}
<div class="king">
<p> Some text Here </p>
</div>
Some good resources:
https://www.w3schools.com/cssref/pr_background-image.asp
https://developer.mozilla.org/it/docs/Web/CSS/background-image
PS: I see in the resources that the form is url('the_path_image')... did you try with '' ?
EDIT
Add an example with no repeated image.
Now the container div is 500x500 and image is 200x200.
If we comment the background-repeat: no-repeat; the image will be repeated for the full div area
You can use below code to set background image.
.king {
background-image: url('../img/banner-lg.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
I have a background I want to use that contrasts nicely with my content, except for the bottom 25% or so of the image. How can I align that 25% position with either the bottom of the content, or a set distance from the bottom of the div? The height of the content varies with page width, and the background has size cover
HTML
<div class="firstPanel">content here</div>
CSS
.firstPanel {
background-image: URL("path-to-background");
background-position: 50% 70%;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 20px;
padding-bottom: 100px;
}
From what I understood in your question,in the CSS you would add this :
margin-bottom:25%;
This specifies a margin in percent of the width of the containing element.
Use this in css file
*{
margin: 0;
padding: 0;
}
It clears all the unavoidable space from page.
I have a long rectangle shape container with a radius.
And I also have 3 child divs, in the container.
Here it is:
As you can see in the picture above, the first child container (white) and the third (red) have also been set a radius to match to containers radius.
Now, the child containers width will be dynamic (changeable by the user). So the user will be able to change the widths of all three child containers to meet their needs.
But take a look at what happens when I give the third container a width of 2%:
the same thing happens when i do the same to the first child (it overlaps the containers rounded borders).
Child container 1 (white) is floating to the left and child container 3 (red) is floating to the right.
I need a way to stop the overlapping from happening.
I am able to use JS and JQuery incase your wondering.
Thanks
EDIT:
CSS:
.parent {
border: 1px solid #5B5B5B;
height: 30px;
width: 80%;
right: 0%;
position: relative;
margin-right: auto;
margin-left: auto;
<? set_radius("25px",true);
set_box_shadow("1px","1px","#F8F8F8");?>
overflow: hidden;
z-index: 3;
}
.child_class {
display: inline-block;
position: relative;
width: auto;
height: 100%;
margin: 0px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #5C5C5C;
box-sizing: border-box;
}
#child1 {
width: 33.33;
background-repeat: repeat-x;
background-position: center center;
<? set_radius("25px",false,false,true,false,true);?>
float: left;
background-color: #fff;
}
#child2 {
width: 33.33;
background-repeat: repeat-x;
background-position: center center;
background-color: #0CF;
}
#child3 {
<? set_radius("25px",false,true,false,true,false);?>
background-repeat: repeat-x;
background-position: center center;
width: 33.33;
float: right;
background-color: #F00;
}
HTML:
<div class="parent">
<div class="child_calss" id="child1"></div><div class="child_calss" id="child2"></div><div class="child_calss" id="child3"></div></div>
In your CSS:
parent{
overflow: hidden;
}
Then you won't have to bother with matching the border-radius on the children, either.
Edit
I've created this jsfiddle to demonstrate:
Not needing border-radius on the children
overflow: hidden rounds the children when they overlap
Unnecessary background- properties on the children are removed
Expected behavior at small percentages
Update
Another note on this:
If you want the CSS/HTML to perform logic for you (not drop the last element out of the bar), you have a clear misunderstanding of what CSS and HTML do.
I've updated the jsfiddle to provide a sort of patch-fix to that issue. The third child is positioned absolutely at the far right, so that it will always stay in the bar.
Update
Finally, here's the bug in Webkit that doesn't correctly clip the background. It appears there's nothing you can do right now except possibly something like this:
<div class="hasBorder hasBorderRadius">
<div class="hasBorderRadius hasHiddenOverflow">
<div class="containsContent">
</div>
</div>
</div>
have you tried giving them a z-index so they have a stack order? also what about an overflow hidden on the parent?