Can't set size of image. Disappears from DIV border
Valio Raltchev
I have a question about image positioning and sizing in DIV. I have an image that I use in a specific DIV and I need it to cover the whole topside of the DIV. When I zoom-in the scale of the browser, instead of shrinking in the DIV, the image disappears and overflows from the right side of the DIV. Also when I zoom-out the scale, the image is being cut-off from the bottom. I know the problem is with the Height, but I do not know how to fix it.
.main_body {
background-color: white;
margin: auto;
margin-top: 150px;
max-width: 78.3%;
height: 500px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
-moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
}
.upper_main {
background-image: url("upper_title.png");
background-repeat: no-repeat;
background-size: cover;
height: 8%;
}<div class="main_body">
<div class="upper_main">
</div>
</div>EXAMPLE:
Temani Afif
Why not simply use an image that take the full width of the top bar :
.main_body {
background-color: white;
margin: auto;
margin-top: 150px;
max-width: 78.3%;
height: 500px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
-moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
}
.upper_main img {
width:100%;
}<div class="main_body">
<div class="upper_main">
<img src="https://lorempixel.com/300/50/" >
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Entity Framework & WPF Application Design Guidance
- Next: How to expand tf.data.Dataset with additional example transformations in Tensorflow
Related
TOP Ranking
- 1
pump.io port in URL
- 2
Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)
- 3
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 4
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 5
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 6
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 7
ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3
- 8
Using Response.Redirect with Friendly URLS in ASP.NET
- 9
Can a 32-bit antivirus program protect you from 64-bit threats
- 10
Double spacing in rmarkdown pdf
- 11
How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?
- 12
3D Touch Peek Swipe Like Mail
- 13
Bootstrap 5 Static Modal Still Closes when I Click Outside
- 14
Assembly definition can't resolve namespaces from external packages
- 15
Vector input in shiny R and then use it
- 16
Emulator wrong screen resolution in Android Studio 1.3
- 17
Svchost high CPU from Microsoft.BingWeather app errors
- 18
Graphics Context misaligned on first paint
- 19
Python connect to firebird docker database
- 20
Is this docker-for-mac password dialog legit?
- 21
How to save models trained locally in Amazon SageMaker?
Comments