Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ question regarding images in backgrouund and banner

Posted by: AXC May 9 2020, 01:43 PM

Hello good afternoon, I am currently practicing html and have come across some issues. I have 2 questions regarding keeping the aspect ratio on images:

1. I created a banner on a webpage and its a little too big for the page so i want to make it smaller. As the code is now, when i zoom in and out of the webpage the image itself does not shrink (zoom out) or grow (zoom in), it maintains its aspect ratio and stays the same size. however when i try to make the image a smaller size (i want the image to be a banner at the top of the page) it gets smaller however when i zoom in and out of the page the size of the image changes, it either stretches out or shrinks. is there a way i can make the image smaller and have it keep its aspect ratio or is there no way around this?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="include/estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="header">
<div id="logo"><img src="images/logo.png" width="100" height="100" alt="logo"/></div>
<div class="nombre"><a href="index.html" class="enlaceportada">movies.com</a></div>
</header>
<nav class="nav">
<span id="menu"><a href="movie.html" class="menunav">movie</a></span>
<span id="menu"><a href="scenes.html" class="menunav">scenes</a></span>
<span id="menu"><a href="clips.html" class="menunav">clips</a></span>
<span id="menu"><a href="series.html" class="menunav">Series</a></span>
<span id="menu"><a href="trailers.html" class="menunav">trailers</a></span>
</nav>
<div class="banner"><a href="index.html"><img src="images/movie.jpg" id = "pic" alt="movie"/></a></div>
<main class="main">
<h1 style = "text-align:center;">The Movie</h1>
<div class = "video2"><iframe width="560" height="205" src="https://www.youtube.com/embed/f695" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<p style = "text-align:center;">Movie info. </p>
</main>
<footer class="footer">rights reserved</footer>
</body>
</html>



This is the CSS that goes with it:

body {
margin: 0px;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
width: 100%;
overflow-x:hidden;


.nav {
position: relative;
background-color:#243a6a;
height:auto;
padding-top:3px;
padding-bottom:3px;
text-align: center;
}

.banner {
position:relative;
width: 100%;
height:100%;


}
#pic {

width: 100%;
height:100%;

}


2. I wanted to include a background image on another webpage and i was able to do so successfully however the image repeats vertically (its a wallpaper and its a pretty large image, so i thought because of this it would not repeat vertically , but it does) when i set the background image to cover and also input no-repeat, the bottom (about 20%) of the webpage becomes blank (you can see the full image but it does not cover the entire background). Actually when i expand the webpage to full screen size the image covers the entire background but if i minimize the window to about half screen size the bottom of the webpage becomes blank. I only have the image and nothing else on the page, here is the CSS:

body{
background-image:url(images/main.jpg);
height: 100%;
width:100%;
background-size : cover;
background-repeat: no-repeat;
overflow-x:hidden; (i didnt want the horizontal scroll bar appearing at the bottom, would this affect the fact that the image does not cover the full background?)
}


thank you so much for the help in advance. I really appreciate it

Posted by: copychick Jun 29 2020, 04:28 PM

remove "height: 100%" from your css for the banner image.

for Question #2

change css to
background-repeat: no-repeat;
background-size: auto;

delete height; width and overflow

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)