Hi been working on this https://codepen.io/junedc/pen/yqXVaR to be responsive but to no avail. If I remove the height or change to percentage the image was lost.
<div class="gallery-height">
<div class="img" style="height:125px; "></div>
<div class="img" style="height:400px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office1.jpg');"></div>
<div class="img" style="height:130px;"></div>
<div class="img" style="height:300px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office2.jpg');"></div>
<div class="img" style="height:300px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office3.jpg');"></div>
If you really have to use it as a background image in the css, here's a trick I like to use in my projects:
url('http...') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Related
I'm new. I've created a <div> inside a <section> and in this <div> I've added two background images using Gridlex. For some reasons, both photo go out of the container. I'd like to do something so both pictures don't go out of the container and take all the space of their Gridlex block.
Anyone, would know what I can do to fix this?
Here the photo:
enter image description here
Here the CSS I've wrote for both images:
.bg-about1 {
background-image: url('../images/about1.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
.bg-about2 {
background-image: url('../images/about2.jpg') ;
background-size: cover;
background-repeat: no-repeat;
min-height: 500px;
}
<section class="light-bg section-about">
<div class="grid">
<div class="col-5_sm12-middle">
<h2 class="padded-7p center uppercase p-white">Title.</h2>
</div>
<div class="col-7_sm12-middle bg-about1">
<!-- <img class="img100" src="./images/about1.jpg" alt="Art design"> -->
</div>
<div class="col-5_sm12-middle bg-about2">
<!-- <img class="img100" src="./images/about2.jpg" alt="photo"> -->
</div>
<div class="col-7_sm12-middle">
<p class="padded-2 p-white"> my text.</p>
</div>
</div>
</section>
maybe try instead of
background-size: cover;
writing:
background-size: contain;
This question already has an answer here:
Horizontal and vertical photos in same row
(1 answer)
Closed 1 year ago.
How set the same height and keep proportions?
When i set height for example 70vh i have what i want but images are not proportional:
When i set height: auto; images are resposive and proportional but have different height:
Can i combine both and have same height and keep proportions?
HTML:
<main>
<div class="container-fluid">
<div class="row first-row justify-content-center">
<div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</div>
<div class="flex-wrap col-6 col-xlg-8 col-lg-6 col-12 col-md-6">
<img src="img/projects/home/test1.jpg" class="img-fluid img">
</div>
<div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">
<img src="img/projects/home/test2.jpg" class="img-fluid img">
</div>
</div>
CSS:
.first-row div img
{
max-width: 100%;
height: auto;
}
Try to use image as background image on div element:
HTML:
<div class="bg-cover-center" style='background-image: url("img/projects/home/1.jpg");'></div>
CSS:
.bg-cover-center {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And don't forget to set width or min-width otherwise div width will be 0 because its don't have content
display: flex to the parent div then assign a height and put the width: auto for the images.
I have a simple code for a simple webpage, but it does not work: for some reason, the background is not displayed. I checked everything in different browsers on different computers. Where do you think there might be a mistake?
.section--map {
padding: 40px 0;
background: #e6e6e6 url("../images/map-bg.jpg") center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
<section class="section section--map">
<div class="container">
<div class="map">
<div class="map__title">
<div><i class="fas fa-map-marker-alt"></i></div>
<h2>Open Map</h2>
</div>
</div>
</div>
</section>
Did you check if path to your image is correct or it might be that your image type is .jpeg?
First of all, my native language is not English I hope that question and description are clear. I'm sorry if they're not.
Problem:
I'm using MDB framework, when I use the grid system the width of the last column is more greater than body. I tried to put widht: 100%; in the content and in every column (Class: Nx).
How do I fix this?
Html:
<div class="Mycolumns">
<div class="row">
<div class="col-8 N1" style="background-image: url(Resources/img/1.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N2" style="background-image: url(Resources/img/Sin%20t%C3%ADtulo-1.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N3" style="background-image: url(Resources/img/3.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N4" style="background-image: url(Resources/img/4.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
<div class="col-4 N5" style="background-image: url(Resources/img/5.jpg); background-repeat: no-repeat; background-size: cover;">
</div>
</div>
</div>
Css:
.N1, .N2{
height: 500px;
}
.N3, .N4, N5{
height: 300px;
}
I just encountered the same problem. What was doing it was one of my nested elements was set to width: 100vw - The view width seems to be the entire browser window including the scrollbar, so you effectively get '100% + scrollbar width' as your width, which gave me a 15px or so blowout. Changing the element's width to 100% fixed it.
This is where the background is in my css. The picture fits perfectly like this, and I don't want to change the position or size or anything in normal browser. I just want the image to resize itself when viewed on phone devices or tablets.
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/mee.JPG) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: 0px 1px;
}
This is the html part:
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-1">
<h1 class="brand-heading">Welcome</h1>
</div>
<div class="col-md-8 col-md-offset-4">
<font size= "6"><marquee behavior="slide" scrollamount ="22"><b>ENGINEER</font></marquee>
<font size= "6"><marquee behavior="slide" scrollamount ="20"><b>DEVELOPER</b></font></b></marquee>
<font size= "6"><marquee behavior="slide" scrollamount ="18"><b>COFFEE ADDICT</b></font></b></marquee>
</div>
<div class="buttonn">
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
You need to create additional css for different screen size, essentially making it responsive.
This is a great link explaining that and how to go about it: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#a-note-on-min-device-width
The CSS used most often for responsive web design are min-width, max-width, min-height and max-height.
Hope that was helpful :)