I have a div on my website. I want to fit the image in this div to the div only in mobile view. I want it to stay normal in the webview. For example, I want this operation to take place under a certain screen size. What can i do in css file
<div class="page-title-wrap bg-overlay bg-overlay-dark-3">
<div class="bg-section"><img src="<?php echo $image_path; ?>"alt="Background" />
</div>
</div>
I'm not sure exactly what you mean by "show properly" but I'll assume you want it to fill up all available space. With CSS you can do the following using flexbox:
.bg-section {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.bg-section img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
Alterativly if you set the BG image with CSS like this:
<div class="page-title-wrap bg-overlay bg-overlay-dark-3">
<div class="bg-section" style="background-image: <?php echo $image_path; ?>"></div>
</div>
You could then just set the size like this:
.bg-section {
width:100%;
height: 150px;
background-size: cover;
}
Related
In <body> <section> I have background image:
<img src="img/background.png" class="back-img">
css:
.back-img {
width: 100%;
height: auto;
overflow:hidden;
}
like this:
<section>
<div id="topLine">
<img src="img/background.png" class="back-img">
</div>
</section>
I'm trying to align different separate square images of same size horizontally in the center over background image in browser window with position: fixed; to keep it in the center of screen with scrolling and organize vertically on mobile screen:
<img src="img/square1.png" class="image">
<img src="img/square2.png" class="image">
<img src="img/square3.png" class="image">
.css:
.image {
position: fixed;
width: 69px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
to archive something like this:
Background color implies background picture and white squares is a same size images.
I've tried this example:
<div class="row">
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
</div>
with:
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
which not organizes images as required in my case and should align pictures in one line, but with position: fixed; I have only one image on screen.
I'm trying to find some correct way to get result, maybe with using of <table>, <tr>, <td> to organize different images according screen size from horizontal to vertical group line automatically with browser window manual narrowing.
First of all, I have to repeat same image in horizontal line in center over background image in fixed position:
Any guide or example would be helpful
CSS grid or flex would be ideal for this (assuming modern-ish browsers).
It's not clear to me why you require an img element for your background image, but I've had plenty of reasons in the past so this would need a little extra to use an img element .
Here is the most basic example of my interpretation of what you're looking for: https://codepen.io/Ilkai/pen/abNdZQK
Basically:
Set up your section with a background-image, and also use it as your source of the container size (full screen with 100 vw/vh)
<section class="bg">
...
</section>
.bg {
background-image: url('...');
background-size: cover;
width: 100vw;
height: 100vh;
}
Create a div that will be dedicated to being your layout parent, with using display: flex/grid (Flexbox is slightly older than Grid, so it has a bit better support). Center children with align-items and justify-content.
<section class="bg">
<div class="layout">
...
</div>
</section>
.bg { ... }
.layout {
width: inherit;
height: inherit;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
You'll also apply your media query to the layout div.
.bg {...}
.layout {...}
#media (min-width: 720px) {
.layout {
flex-direction: row;
}
}
Add your img elements as children of the layout div, size accordingly.
<section class="bg">
<div class="layout">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>
</section>
.bg {...}
.layout {...}
#media (...) {}
.layout img {
width: 6rem;
height: 6rem;
object-fit: cover;
margin: 1rem;
}
If I have misunderstood what you're after let me know in the comments
With position: fixed the images are likely overlapping.
Try wrapping them in a fixed element, and letting them be children in that element, you could then either use display: inline block; text-align: center; or display: flex; justify-content: center; to achieve your goal.
I recommend using flex as you can very easily change this for your mobile CSS.
I'm having an issue where some images are not covering the entire width of the browser and some images are just too large to the point where you have to scroll right to see the entire image. I am using background-size:cover and I tried background-size: auto 100%; because that fixed it for some people. I want the background below my navbar to be an image, can someone help me understand why I am unable to achieve this?
<nav>
<ul class="navbar-list">
<li class="navbar-items">Home</li>
<li class="navbar-items">About</li>
<li class="navbar-items">Basics</li>
<li class="navbar-items">Contact</li>
</ul>
</nav>
<div class="body-img">
<img
src= "https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
alt="sorry it looks like something went wrong."
/>
</div>
for my css I use : body-img img { background-size: cover; }
Set the width of body-img to width:100vw
You can also remove the padding and margin in the page using:
* {
padding: 0;
margin: 0;
}
Try it by using Flex.
.d-flex {
display: flex;
flex-flow: column;
height: 100vh;
}
.body-img {
flex: 1;
height: 100%;
}
.body-img img {
height: 100%;
width: 100%;
}
Html codes are like that.
<div class="d-flex">
<nav>
<ul class="navbar-list">
<li class="navbar-items">Home</li>
<li class="navbar-items">About</li>
<li class="navbar-items">Basics</li>
<li class="navbar-items">Contact</li>
</ul>
</nav>
<div class="body-img">
<img
src= "https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
alt="sorry it looks like something went wrong."
/>
</div>
</div>
If you don't want the image stretching, remove width property.
Many problems with this.
.body-image img{
background-size:cover;
}
The img tag is not considered a container. Therefore background-size:cover; is not a appropriate style property for it.
If you intended to use a image as a background for a container; in this scenario a div element. You would call the image url through CSS vs using a img tag.
.body-image{
background-image: url('');
background-size: cover;
}
But wait this is still incomplete in order to scale the whole window size. Containers with no set width inherit the property width:auto;, so we will need to set the width of the container.
.body-image{
background-image: url('');
background-size: cover;
width:100%;
display:flex;
}
If you still insisted to keep a img tag. You would only need to set the width of both the container and the img tag.
so this code will also work for your desired effect.
.body-image{
display:flex;
width:100%;
}
.body-image img{
width:100%;
}
Im creating an application which includes the home screen. This will have a biography of the client. Im trying to create a header, which will include the title and a round display image. From the code i used 3 divs, which will hold the wrapper, title and picture. I done the display:flex which will have them in 1 line, and flex:1 to move the image to the right. When doing the radius 50% its squishing the photo . Can you help me out?
Thanks. Heres the code.
.headerOfBio {
display: flex
}
.displayPic {
flex: 1 background-image: url("../images/displayPicture.jpg") border-radius: 50%
}
<div class="quote titleBio">
<div class="headerOfBio">
<h3>
MEET THE <span class="diffColor">FOUNDER</span>
</h3>
<div class="displayPic">
</div>
</div>
</div>
After adding height and width it becomes like this:
Instead of adding a background image to a div, adding a img tag will give a better result.
.headerOfBio {
display: flex;
}
.displayPic img {
flex: 1;
width:50%;
border-radius:100%
}
<div class="quote titleBio">
<div class="headerOfBio">
<h3>
MEET THE <span class="diffColor">FOUNDER</span>
</h3>
<div class="displayPic">
<img src="https://placeimg.com/250/250/nature" />
</div>
</div>
</div>
Mention width, height for the div holding the image and change border-radius to half of the width/height.
.displayPic{
flex: 1
background-image: url("../images/displayPicture.jpg")
width: 300px;
height: 300px;
border-radius: 150px;
}
Why have you used flex:1?
Try this...
.headerOfBio {
display: flex;
align-items: center;
justify-content: space-between;
}
.displayPic {
background: url("https://aeutas.org.au/wp-content/uploads/2014/12/people-icon.png") no-repeat;
border-radius: 50%;
height: 100px;
width: 100px;
border-radius : 50%;
}
https://jsfiddle.net/cd3czf30/1/
Hi,
See the screenshot, I'd like to know how I can fit my simple countdcown to always take 100% of the screen? I've made it to fit my phone, but Id like it to be 100% on the desktop aswell.
What I've tried:
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
}
But, this will only make the body 100%..
Where do I start? Does anybody have a tutorial or anything?
A simple example of using vw or vh (viewport), try it and you will see the difference.
Also with to center your element. you could use:
display: flex;
align-items: center;
justify-content: center;
Vertical Centering
REF: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Viewport
REF: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
body {
margin: 0;
}
.test1 {
background: red;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.test2 {
background: green;
width: 100vw;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.innerwraper {
height: 100px;
width: 200px;
background: aqua;
}
<div class="test1">
<div class="innerwraper">This is 100% width</div>
</div>
<div class="test2">
<div class="innerwraper">This is 100vw</div>
</div>
Automatically the height and the width of the body is 100% and it can not be changed to an other value so your code is unuseful.
To make the content take bigger height and width you should modify the css height and weight properties of the content (buttons, text inputs, divs, etc).
You will have to define all sizes, lengths and widths in 'vw' and 'vh'. It stands for viewport width and viewport height. This will tell the browser to render every objects size relative to the width of the screen (or height, depending on what you choose).
In your example every object should be about 20vh heigh, with a margin of 5vh. Four objects make then a perfect 100vh (100% viewport height).
You could start with this css:
input, div {height: 20vh; margin: 5vh 1vh;}
You can wrap the entire combination of buttons and views in a div, for example:
<div id = "wrapper"> </div>
Then inside of the div modify each element's height and width based on percentages. For example, you have 4 elements vertically, and three buttons on the bottom. So your three buttons on the bottom could be further wrapped in another div making them act as one element. Then you can split the 4 elements to height: 25%; and make width inherited.
So it would look something like this:
<body>
<div id="wrapper">
<div class="element"> insert element here such as input </div>
<div class="element"> element here such as input button </div>
<div class="element"> element here such as counter </div>
<div class="element">
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
CSS:
.element{
height:25%;
width:inherit;
}
#wrapper{
height:100%;
width: 100%;
}
Above all the properties inside the block of codes if there is no * {
box-sizing: border-box;
}
The Content will not fit in...
My goal is to center an image which is bigger in a my div.
I do not want to resize the image.
The center of the image must be displayed.
My div is defined like:
div.thumbnail
{
display: block;
margin: auto;
height: 100px;
width: 100px;
overflow: hidden;
}
And then my idea was to create this additionally for the image:
div.thumbnail img
{
overflow: hidden;
margin: auto;
}
The HTML looks like:
<div class="thumbnail">
<a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}">
<img src="{{ url_for ('static', filename=album['ThumbPath']) }}">
</a>
</div>
But this does not work for me.
Any advice how to fix this?
Thanks Darrell.
Here is the trick. It is easy to center the image horizontally. However the vertical centering is not so easy and involves more markup. You may use background-position property. Here is jsfiddle http://jsfiddle.net/krasimir/ydzZN/2/
HTML
<div class="thumbnail">
<a href="#" style="background-image: url('http://www.australia.com/contentimages/about-landscapes-nature.jpg')">
</a>
</div>
CSS
div.thumbnail {
display: block;
margin: auto;
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
}
div.thumbnail a {
display: block;
width: 100%;
height: 100%;
background-position: center center;
}
There is a bad effect of course. Your image will not be indexed, because it is in a css style.
Horizontally centering the image should be straightforward, but vertically centering page elements is a pain. A cleaner solution would be to set the image as the background-image of the div (or possibly the anchor tag) and use the other css background properties to position it. Something like: style="background-image: url([url]); background-position: center" should do the job.
This is by far the easiest solution I know, you need two divs to do what you are trying to do. like so:
<div class="thumbnail">
<div class="image-container">
<a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}">
<img src="{{ url_for ('static', filename=album['ThumbPath']) }}">
</a>
</div>
</div>
css
.thumbnail{
width: 100px;
height:100px;
overflow:hidden;
}
.image-container{
width: 100%;
height: 100%;
//use the margin property to position the image in the div.
margin: 0 0 0 0;
}
we set the thumbnail div to whatever size we want and by making the overflow hidden the div inside thumbnail, in this case our image will be full size but cropped to what ever spot of the image we wish to show .
To center multiple sizes of images inside of a single sized div, set the image as the background (centered) of the div in CSS - no img elements necessary. Then set a fixed width for the div and hide the overflow.
<div class="s1"> [ Content ] </div>
<div class="s2"> [ Content ] </div>
<div class="s3"> [ Content ] </div>
div{
width:300px;
height:300px;
overflow:hidden;
}
.s1{
background:transparent url("http://placehold.it/500x500") center center no-repeat;
}
.s2{
background:transparent url("http://placehold.it/700x500") center center no-repeat;
}
.s3{
background:transparent url("http://placehold.it/500x700") center center no-repeat;
}
http://jsfiddle.net/daCrosby/sYgHG/1/