I'm working on a website that has sections with text on one side and a background image on the other. In one section everything is working fine. When I resize my browser the background image is responsive and scales down. But in the next section, the background image is not responsive, the image actually gets bigger when I resize my browser and I have no idea why. (I've only been learning how to code for about a month so I'm hoping the answer is glaringly obvious)
Here's the css from the section that works:
#welcome {
margin-top: 34px;
padding-top: 0px;
padding-bottom: 0px;
height: 120vh;
background-color: #dae7e9;
}
#welcome .box1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 55%;
height: 120vh;
}
#welcome .box2 {
width: 45%;
overflow: hidden;
background-image: url("https://i.ibb.co/c6txf7Y/Gabriel-Venneri1-3.jpg");
background-size: cover;
background-position: center;
border: 1px solid black;
}
And here's the css from the section that doesn't:
#about {
background-color: #5d5c61;
}
#about h1 {
color: #123c69;
margin-bottom: 0;
}
#about .box1 {
width: 40%;
background-image: url("https://i.ibb.co/k6mNw42/IMG-6333-2.jpg");
background-size: cover;
background-position: center;
border: 1px solid black;
}
#about .box2 {
width: 60%;
}
The HTML:
<section id="about">
<div class="container-1">
<div class="box1"></div>
<div class="box2">
<h1>About</h1>
<p>Text</p>
</div>
</div>
</section>
I've been trying to find a solution for a week and a half so any help would be greatly appreciated
Here is a link to the site, the about section image is the issue: https://codepen.io/gvenn/full/XWNzeqW
Related
Total newbie here, tried to google my issue, even get on the second page of results... I'm stuck on resizing image and I have no idea why it is not working, hoping someone can help. By using Inspect on Chrome I can see that element for img is not being connected to the img and I have no idea why.
Block below is within <main>
<article>
<section class="article-content">
<img src="./assets/images/page_screenshot.png" alt=""/>
</section>
</article>
Here is CSS that I have for the whole part.
main {
display: inline-block;
background-color: var(--main-bgc);
padding-top: 5%;
}
article {
display: flex;
margin-bottom: 3%;
width: 100%;
}
.article-title {
display: inline-block;
width: 9%;
margin-right: 1%;
color: var(--font-colot-slate);
border-right: 1px solid var(--font-color-white);
}
.article-title h2 {
float: right;
margin-right: 10px;
}
.article-content {
display: inline-block;
width: 90%;
float: right;
color: var(--font-color-white);
}
.article-content img {
width: 100px;
height: 100px;
}
I tried adding height and width in tag and works fine, but not very happy with that solution.
The code you've given us works fine, as you can see in this snippet (run it to see the result). So if your image is not being properly resized, it must be because of some other part of your code, which you haven't included.
If you want the image to retain its original aspect ratio, you can add object-fit: cover; which will crop the image rather than squash it.
article {
display: flex;
margin-bottom: 3%;
width: 100%;
}
.article-content {
display: inline-block;
width: 90%;
float: right;
color: var(--font-color-white);
}
.article-content img {
width: 100px;
height: 100px;
object-fit: cover;
}
<article>
<section class="article-content">
<img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg">
</section>
</article>
I've tried putting together a simple scenario with css for a card style layout.
It looks ok on a 22 inch monitor, but when viewed on my samsung tv 1920x1080 resolution it does not look good.
It looks like the border has a white gap in it caused by anti-aliasing.
html
<main>
<div class="card-holder">
<div class="card-header">
<div class="card-icon">
<span class="icon icon-bell"></span>
</div>
<span class="card-title">Title</span>
</div>
<div class="card-about">
<span>Some about text.</span>
</div>
</div>
</main>
css
.card-holder {
border-radius: 10px 10px 0px 0px;
border: 3px solid rgb(0, 0, 0);
border-spacing: 0;
overflow: hidden;
width: 300px;
}
.card-header {
display: flex;
align-items: center;
padding: 5px;
background-color: rgb(0, 64, 255);
color: #fff;
overflow: hidden;
}
.card-title {
display: inline-block;
flex-grow: 1;
text-align: center;
}
.card-about {
display: block;
}
.card-icon {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: white;
overflow: hidden;
height: 64px;
width: 64px;
}
.icon {
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
height: 48px;
width: 48px;
vertical-align: middle;
}
.icon-bell {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg);
}
When I zoom the browser to 80% then a white line appears at the right hand side of the card.
Is there a recommended approach to make this scenario work nicely across different zoom levels and monitor resolutions?
I've been tearing my hair out.
Update
I made a codepen here
You're mixing relative and fixed units. Things like em and % will be different based on the browser, device, and zoom. Try using all relative or all fixed so the browser isn't trying to interpret them differently.
Example:
border-radius: 10px 10px 0 0;
vs
border-radius: 1em 1em 0px 0px;
in this page I am trying to make the rectangular image on the top to be full width. I tried to give it several different properties, but the nearest effect to what I want is given by:
.dla-ciebie__services .dlaciebie-header-image {
background-image: url(images/dla-ciebie/dlaciebie-1600.jpg);
background-size: contain;
background-position-y: top;
background-repeat: no-repeat;
width: 100vw;
min-height: 100vh;
}
Here is the HTML that contains this element and the next block:
<div class="dla-ciebie">
<section class="dla-ciebie__services">
<div class="dlaciebie-header-image"></div>
<em class="services-intro">Chcę powiedzieć Ci coś bardzo ważnego...<br>nie urodziłaś się po to, by żyć nieświadomie, w bólu i z dużym bagażem zmartwień. Jesteś tu dlatego, że masz w sobie <strong>ogromną siłę, która czeka, aż pozwolisz jej udowodnić swoją moc!</strong>
</em>
<div class="services-background">
And here is the full SCSS:
.dla-ciebie__services {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
box-sizing: border-box;
margin-top: 40px;
.dlaciebie-header-image {
background-image: url(images/dla-ciebie/dlaciebie-1600.jpg);
background-size: contain;
background-position-y: top;
background-repeat: no-repeat;
width: 100vw;
/* height: 289px; */
min-height: 100vh;
}
.services-intro {
font: 40px/60px "Libre Baskerville";
color: $bluedark;
width: 60%;
text-align: center;
br {
margin: 0;
}
strong {
font-weight: bold;
}
#media (max-width: 900px) {
width: 88%;
font-size: 28px;
line-height: 54px;
}
#media (max-width: 500px) {
font-size: 18px;
line-height: 32px;
}
}
.services-background {
background-image: url("images/blue-painting-1200.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-top: 80px;
width: 100%;
}
}
Here I cannot give a static height in px, because if I give it a static height, on smaller browsers, the image will change it's proportions.
At the same time what i did is not good too, because it adds some kind of white space below the image.
If you shorten the width of the browser window you will see how much the white space below the image increases.
I'd like to ask you for help to solve this issue (if possible avoiding JS solutions). I tried different tutorials, but it seems that how that site is constructed, other tutorial don't seem to be applicable, thus I see the need of a specific solution to this page.
Thanks in advance.
Don't use <div> as a image by adding background-image to it. Instead, use <img> element, that is why it's made into HTML.
To make it responsive, use width: 100% without height. If you set it like that, Image will auto resize with browser.
This should work perfectly:
.dla-ciebie__services {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
box-sizing: border-box;
margin-top: 40px;
}
.dlaciebie-header-image {
max-width: 100%;
}
.services-intro {
font: 40px/60px "Libre Baskerville";
color: $bluedark;
width: 60%;
text-align: center;
}
#media (max-width: 900px) {
.services-intro {
width: 88%;
font-size: 28px;
line-height: 54px;
}
}
#media (max-width: 500px) {
.services-intro {
font-size: 18px;
line-height: 32px;
}
}
<div class="dla-ciebie">
<section class="dla-ciebie__services">
<img src="https://unsplash.it/1600/500" class="dlaciebie-header-image">
<p class="services-intro">Chcę powiedzieć Ci coś bardzo ważnego...<br>nie urodziłaś się po to, by żyć nieświadomie, w bólu i z dużym bagażem zmartwień. Jesteś tu dlatego, że masz w sobie <strong>ogromną siłę, która czeka, aż pozwolisz jej udowodnić swoją moc!</strong>
</p>
</section>
<!-- Other code -->
</div>
So i have a background image, i need to put an horizontal white strip over this background image, in order to put a title into the strip. I know how to make boxes over an image on CSS but i'm having an hard time making this strip, it must not be a box, it has to cover the whole background image from the left margin to the right margin of the image, any idea?
Here is the piece of code involved:
.title-image {
position: fixed;
height: 230px;
margin-top: -16px;
margin-left: -20px;
}
h1 {
background: white;
position: absolute;
font-family: Play;
color: #c76161;
}
<div class="title">
<img class="title-image" src="" alt="">
<h1>Title</h1>
</div>
You can simply use multiple background like this:
.box {
width:200px;
height:200px;
line-height:200px;
font-size:20px;
text-align:center;
background:
linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8))0 50%/100% 80px no-repeat,
url(https://lorempixel.com/200/200/);
}
<div class="box">
some text
</div>
Use flexboxes and background images
body{
margin: 0;
padding: 0;
}
.image{
width: 250px;
height: 250px;
background-color: red;
display: flex;
align-items: center;
}
.title_container{
width: 250px;
background-color: green;
text-align: center;
}
<div class="image"><div class="title_container"><h1 class="title">Test</h1></div></div>
Replace background-color: red; by background-image: url("yourimage.png");
I am trying to figure out how to make a space between text and image. I've tried everything I learned so far, including word spacing, padding.
Let me show you picture which will give you a better understanding of what I want to achieve.
I want to increase space between the image and the text. Highlighted as yellow.
How can I achieve it using this example code? Link to CodePen
html
<div class="navbar-header">
<div class="container">
<div id="logo">
<a href="#">
Amazing <img src="http://www.clipartkid.com/images/650/image-spiderman-logo-png-spider-man-wiki-wikia-hYo1XM-clipart.png"/> Spiderman
</a>
</div>
</div>
</div>
css
.navbar-header {
border-bottom: 1px solid black;
height: 70px;
margin-bottom: 0;
position: fixed;
width: 100%;
z-index: 100;
}
.container {
align-items: center;
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
#logo {
align-items: center;
margin: auto;
}
#logo a {
align-items: center;
color: black;
display: flex;
flex-grow: 2;
margin: auto;
text-decoration: none;
word-spacing: 200px;
}
#logo img {
height: 66px;
margin: auto;
}
I think giving the img a left/right margin should be the best solution. Easiest way to accomplish this:
#logo img {
height: 66px;
margin: auto 20px;
}
If I understand your question..... I would just add left and right margins to the #logo img of about the space you want
#logo img {
height: 66px;
margin: auto;
/*you would want to change this, so as to not have both declarations, I just dont know how much top and bottom margin you want*/
margin-left: 15px;
margin-right: 15px
}