Help - Search - Members - Calendar
Full Version: question regarding images in backgrouund and banner
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
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>
<meta charset="utf-8">
<link href="include/estilos.css" rel="stylesheet" type="text/css">
<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"></a></div>
<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>
<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="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<p style = "text-align:center;">Movie info. </p>
<footer class="footer">rights reserved</footer>

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%;

.nav {
position: relative;
text-align: center;

.banner {
width: 100%;

#pic {

width: 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:

height: 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
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
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.