I am customising a website in WordPress(CMS). I want to add some elements in my website as background design.
It look something similar like this:
I google and found a way to do it - Using a builder tool in CMS - Elementor.
The good thing is, in Elementor there is a way to add background-img and control background-position.
The bad thing is, I have successfully added and control the element moving around until the place that I want. But The background element seems cannot cross the <section> which mean they will only stay in their own container.
I figured it out another way to do it, which is add the <img> at the current page. Then use position: absolute to position it properly.
But I prefer not to do that way.
Example snippet:
#section-1 {
background-color: #000;
width: 100%;
height: 200px;
color: white;
padding: 20px;
}
#section-2 {
background-color: yellow;
background-image: url(https://temp1.asign.pro/wp-content/uploads/2019/05/element-2.png);
background-position: -150px -223px;
background-repeat: no-repeat;
width: 100%;
height: 200px;
color: black;
padding: 20px;
}
<section class="section" id="section-1"></section>
<section class="section" id="section-2"></section>
The issue with using the triangles as a background-image is that you'll never be able to position them 'out' of the section. The background is a part of the element and can only go as far as the element's dimensions. However, you can make use of the pseudo element and position them absolutely, like so:
#section-1 {
background-color: #000;
width: 100%;
height: 200px;
color: white;
padding: 20px;
overflow: visible;
}
#section-2 {
background-color: yellow;
width: 100%;
height: 200px;
color: black;
padding: 20px;
overflow: visible;
position: relative;
}
#section-2::before{
content: '';
position: absolute;
top: -70px;
left: 0;
width: 200px;
height: 200px;
background: url(https://temp1.asign.pro/wp-content/uploads/2019/05/element-2.png) no-repeat center center/100%
}
<section class="section" id="section-1"></section>
<section class="section" id="section-2"></section>
I'm trying to build an info card where if the screen is large, you'd have an image filling the left half of the card and text on the right and if the screen is small you'd have the picture on the top and text on the bottom. I was able to do the first part by adding position: absolute;top: 0;left: 0;bottom: 0;width: 40%, and the setting background-image: src;background-size: cover; and then setting margin-left: 40% on the content. But ultimately this makes it hard for a structure like this to adapt to screen sizes without some javascript. I'd like to avoid using js as much as possible for this so I looked for solutions online and came upon answers such as using a flexbox and using the object-fit css property, but none of those really worked. Here's my code:
.signup-form-wrapper {
display: flex;
align-items: center;
height: 400px;
width: auto;
border: 1px solid rgb(200, 200, 200);
margin: 10px 0px;
}
.img-wrapper {
height: 100%;
width: 50%;
}
.img-wrapper img {
display: block;
max-width: 100%;
height: auto;
}
.content-wrapper {
display: inline-block;
max-width: 60%;
text-align: center;
padding: 0px 14%;
}
body {
height: 100%;
width: 100%;
}
<body>
<div class='signup-form-wrapper'>
<div class='img-wrapper'>
<img src='http://www.parkermeridien.com/media/pool_fashion_f.jpg' />
</div>
<div class='content-wrapper'>
<p>Hello, World!</p>
</div>
</div>
</body>
You were on the right track!
Media queries (which you experimented with) are the right way to do this without JavaScript. I went back to using a background-image instead of an img - here's a simple way to do this using floating to keep the elements side-by-side, with a media query (at the bottom of the CSS) that turns off the floating so the elements stack.
I also added box-sizing: border-box; for all elements to prevent padding/borders from modifying the size of elements (which is good practice).
body {
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
.signup-form-wrapper {
height: 350px;
border: 1px solid rgb(200, 200, 200);
margin: 10px 0px;
}
.img-wrapper {
height: 100%;
width: 40%;
float: left;
background-image: url('http://www.parkermeridien.com/media/pool_fashion_f.jpg');
background-size: cover;
}
.content-wrapper {
float: left;
width: 60%;
text-align: center;
padding: 0px 14%;
}
#media (max-width: 768px) {
.img-wrapper,
.content-wrapper {
width: auto;
float: none;
height: 175px;
}
}
<body>
<div class='signup-form-wrapper'>
<div class='img-wrapper'>
</div>
<div class='content-wrapper'>
<p>Hello, World!</p>
</div>
</div>
</body>
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I am trying to get an image horizontally and vertically centered within a div of variable height and width.
So far, so good.(See jsfiddle links below)
Now the catch is the image should also be responsive and adjust if either the height and/or width of the container is smaller than the images height or width.
After researching, going through all the different "solutions" out there and fiddling for a solution, I was unable to find the perfect one, however two came close:
1.) This first one does everything I need except when the window width is smaller than the image width, the image is no longer horizontally aligned:
http://jsfiddle.net/me2loveit2/ejbLp/8/
HTML
<div class="overlay">
<div class="helper"></div>
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
CSS
.helper {
height:50%;
width:100%;
margin-bottom:-240px;
min-height: 240px;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}
2.) This second example keeps everything aligned, but the image does not scale down when the height is less than the image height:
http://jsfiddle.net/me2loveit2/ejbLp/9/
HTML
<div id="outer">
<div id="container">
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
</div>
CSS
#outer {
height:100%;
width:100%;
display:table;
position:fixed;
top:0px;
left:0px;
background-color: rgba(0, 0, 0, 0.5);
}
#container {
vertical-align:middle;
display:table-cell;
max-width: 100%;
max-height: 100%;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display:block;
}
I have attempted this in the past and the only non-JS solution I've come up with (which is frowned upon, by the way) is this:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: table;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid #f00;
}
.container > div {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #00f;
max-width: 550px;
max-height: 480px;
background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
background-size: contain;
}
<div class="container"><div></div></div>
http://jsfiddle.net/pYzBf/1/
Set the background color of the div to black to see the scaling without the image edges. I used those dimensions so you can test it by resizing the frame.
I want to display images on a .net page which I load from database (the amount can thus vary). All images have different widths and heights up to 130px and 60px respectively. I want to put the images into container elements with a fixed width of 130px and a fixed height of 60px. The images should be centered vertically and horizontally. The container elements should be aligned horizontally if possible.
I tried div (with float) and span. With div, I get the fixed sizes, but cannot center the images. With span, I can center, but not set any size. If I put span into div, it seems to behave like div (centering is ignored).
You can see it work on http://jsfiddle.net/km5dk/8/
But I think you search something like this.
### HTML ###
<div id="container">
<div class="image-container">
<img src="#" alt="A image" />
</div>
</div>
### CSS ###
#container {
width: 130px;
height: 60px;
display: table;
background-color: #ccc;
}
#container .image-container {
text-align: center;
vertical-align: middle;
display: table-cell;
}
#container .image-container img {
max-width: 160px;
max-height: 60px;
}
make image center
.image-container {
width: 500px;
height: 500px;
position: relative;
}
.image-container img {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
auto-resize an image to fit a div container
.image-container img {
max-height: 100%;
max-width: 100%;
}
Thinking a little outside of the box (excuse the deliberate pun!) you could use background-size on your container's CSS rule, and background-image: url(this_image.jpg); as an inline style on the individual containers themselves.
This would handle all of the scaling for you in a smaller and neater package.
Setting background-size: cover; would scale the image so that the smallest dimension matched (though there may be some cropping), and background-size: contain; would ensure the entire image fitted.
It's another option...
Danny
Use positioning. The following worked for me:
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
With Bootstrap 3 you can add an img-responsive center-block class to center an image
<img class="img-responsive center-block" src="my_image.png" />
if you have an IMG tag inside the divs, use margin: 0px auto on the div css;
For vertical:
display: table-cell; vertical-align: middle;
I'm still learning myself just started doing HTML/CSS about two weeks ago, but this seems to work great has hover, click, description box, title box, and centered image.
You can put the CSS code in a separate style sheet as well. I thought I'd keep them together for the post.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:black;
color:white;
}
#container
{
width:18em;
height:18em;
}
#title-image
{
background-image:url('http://www.gravatar.com/avatar/cd1954c9caf7ffc02ab18137967c4bc9?s=32&d=identicon&r=PG');
background-repeat:no-repeat;
background-position:center;
border:1px solid RGBa(255, 255, 255, 0.1);
background-color:RGBa(127, 127, 127, 0.1);
color:#CFCFCF;
width:10em;
height:10em;
margin-left: 3.9375em;
margin-right: 4em;
text-align:center;
display: block;
}
#title-image:hover
{
border:1px solid RGBa(255, 255, 255, 0.15);
background-color:RGBa(127, 127, 127, 0.15);
color:#FFFFFF;
}
#description
{
width: 18em;
border:1px solid RGBa(255, 255, 255, 0.03);
background-color:RGBa(127, 127, 127, 0.03);
text-align:center;
display: block;
}
</style>
</head>
<body>
<div id="container">
This is your Title?
<p id="description">Your description<br>Can go here.</p>
</div>
</body>
</html>
Mr Lister:
IMHO for vertical you have to add display: table; to d parent & specific height, for example:
.parent {
display: table;
height: 100vh;
position: fixed;
}
.parent .child {
display: table-cell;
vertical-align: middle;
}