I'm new to html and css. Our assignment for AIT is to code a website however I'm stuck behind a bump at the moment with this. Basically, I want the logo of the website, 'Daft Punk' located in the center of the website to maintain its transparent background:
with the code:
.logo1 {
margin-left: auto;
margin-right: auto;
display: flex;
z-index: 2;
position: absolute;
text-align: center;
transform: translate(0, 5%);
vertical-align: middle;
align-items: center;
justify-content: center;
}
However the issue that I encountered is that whenever I scroll out, the image tends to stay the same size (I want it to shrink according to the zoom) and eventually suddenly shift toward the left of the page. The size maintained is possibly due to 'position: absolute' however whenever I change it to something else, the background of the image is suddenly white:
when I change position:# to anything else such as 'relative' etc. How do I make it so that when I zoom out, the content / logo in the center will also zoom out / shrink and stay at the center at the same time without losing its transparent background?
Related
his is a screenshot of the localhost webpage:
[faulty image removed]
This is a screenshot of the deployed webpage with vercel:
The problem is that the gray div shows its underlying elements.
.zoombackground {
background-color: #333;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999999999999999999999999 !important;
}
(Assuming you're trying to make it so the color grey covers those images)
I would definitely suggest changing the format of what you're trying to do. You're using a background as a foreground, and trying to keep the elements below that foreground visible at all times. I would instead recommend making the elements in the div hidden until you want them to be shown, while keeping either the div at the same size and just being grey, or making the div relatively expand when you want the images to appear
I have a list of images as shown in fiddle in which I have aligned images in a straight line.
In the fiddle, the last logo (as shown in the screenshot below marked by a red circle) seems to resize and I am not sure what are the reasons behind that.
The CSS codes which I have used in order to align the images in a straight line are:
.images {
display: flex;
justify-content: space-between;
align-items:center;
background-color: #eee;
padding: 1rem;
flex-wrap: wrap;
}
.images img {
width: auto;
height: 2.5rem;
}
Problem Statement:
I am wondering what changes I should make in the CSS codes so that the last logo (emma marketing logo) should have the same size as other logos. At this moment, the size of every image is set to auto and height to 2.5rem
On inspect, the logo seems to resize as shown below marked by the red arrows.
You need to crop the last picture, as you can see there's a large transparent area around it.
Recently im finally making my webgame responsive and im struggling with it.
I researched that in order to my divs to be a proper size on every device I need to set position: relative on parent element, position: absolute on the divs I want to be responsive, and that part I get.
However, I need my divs to be related to the background image, because the parts of the backgrounds are clickable via divs. Can anyone guide me how to do this? Recently Ive got it looking like that:
I believe I could achieve what I want with setting proper properties on the background image which I currently have set as:
#corridor {
/*position: relative;*/
height: 100vh;
width: 85%;
float:right;
background: url("corridor.jpg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
I'm trying to Vertical centering picture on my page
i tried few scripts & styles but none of them worked
my page is:
TEST.esc.bugs3.com
I'm trying to Center the "Arrow" pic on the left & right sides to the center of the main pic
today all i get is the pic is always on the "TOP" of the DIV & i wish to put in in center
Note: I don't wanna use fix size as PX i wish to make it with 50%
like main pic is the 100% height and the arrow will be show on 50% of it
Layout - how i wish it will look like
thanks for the help :)
Edit:
thanks for the answers
but i need the side div (side box) to be Vertical centered to the main div (center box)
the main pic size is not fixed (every media will have different size - so i cant use PX as position
Use CSS3 Flexbox for modern Browsers: Here's Browser support for it.
.center-both{
display: flex;
justify-content: center;
align-items: center;
height: 350px;
background: LightSeaGreen;
}
Fiddle
Read this article for more on flexbox: http://dipaksblogonline.blogspot.in/2014/05/css-flexbox-explained-with-examples.html
If you want to support old browsers like IE7/IE8 then use display: table-cell; property to place the content vertically center.
Change the css for Sidepanel class as below
.SidePanel {
width: 5%;
height: auto;
float: left;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
Use This Code For Your Pic:
.pic{
position: absolute;
top: 50%;
margin-top: -(HEIGHT/2)
}
Which HEIGHT is Your Picture's height in Pixels.
Update 1
Your Container Should Have A Specific Height And Have A CSS Property: Position: (Relative|Absolute|Fixed)
I have a very large wallpaper (1920x1080 - Full HD) on my site, and I want it to center to the middle of the screen, instead of the left side, if the browser window is smaller than the image.
My current markup looks like this:
<div id="wallpaper">
<img />
</div>
And the styles are:
div#wallpaper
{
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
div#wallpaper img
{
display: block;
margin: 0px auto;
}
I'm using an img tag, because I load it async through jquery, and I'm using position absolute on the parent div to ensure it stays out of the page flow. Finally my content is positioned on top of it with z-index higher than 1.
The problem with the above is, when you browser is only 1024x768 you'll just see the left side of the image - I want it to be the middle portion.
Meaning it should crop from both left and right sides, when the wallpaper is larger than the browser window.
Hope all this made sense, otherwise please ask :-)
I'm not sure what you want to do is possible, the way you're doing it.
What I would do is set the image to be the background-image of the wallpaper div, and then set the background position to center the image.
eg.
<div id="wallpaper" style="background-image: foo.jpg"></div>
and in CSS...
div#wallpaper
{
background-position: top 50%;
}