New to web design, so this is probably really badly written code. This may be something very obvious, but no matter what i change in the css of the logo, i can't get it to move? I need to move the logo down.
.header {
padding: 10px 16px;
background-color: darkred;
box-shadow: 0px 10px 20px black;
font-family: arial;
position: relative;
height: 90px;
}
.logo {
position: absolute;
float: left;
margin-top: 50px;
}
<div class="header" id="myHeader">
<div class="logo">
<img src="https://via.placeholder.com/300x90" width=300 height=90>
</div>
</div>
If you are trying to move the logo somewhere in the website, I think you should not use float, it will attached to somewhere position that you assign them to and because of that you can't move your div freely. You must use top, left, right, bottom. At the same time it will replace margin-top for you. Also you should contain background-repeat: no-repeat, background-size: contain. So your logo won't repeat if you scroll down. And last, you should set margin: 0 auto for they not sticky to other div if you have any.
.logo {
position: absolute;
top: 12px; //For example
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}
Related
I'm trying to set a png to be the bottom border of one div and again at the top of my footer. I've tried border-image as well as using it as the background image for my div, but I've failed to figure it out. Right now I'm just getting a black bar at the bottom of my first div, and a little black mark at the top of my Footer. Any explanation would be greatly appreciated.
Here's my code so far.
Main Page
<div className='about-wrapper'>
<img src='https://image.shutterstock.com/image-photo/gorilla-thinking-260nw-54482215.jpg' alt='Adam Face'></img>
<h2>Name</h2>
<p>Welcome to my site! I am a developer currently developing in ReactJS.</p>
</div>
.about-wrapper {
padding: 20px;
border-bottom: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 1%;
background: linear-gradient(#519DFE, #110BFF);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
height: 100vh;
color: white;
}
Footer
<div className='footer-wrapper'>
</div>
.footer-wrapper {
height: 400px;
background: #001ED4;
border-top: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 1%;
Here's what my pages look like
First Div
Footer
The border-image-slice property indicates which parts of the image are used for the border; with only a single value, it will the same percentage of the width and height for the slices.
(Note that I used about 10% in my illustration to make it clear, but it works the same for 1%.) Since you have only a border bottom for the about-wrapper div, only the bottom part will be used.
So if you want the entire picture for a bottom border, the solution is to not use an 1% image slice. You would need 0 0 100% 0 (for top, right, bottom, left respectively). Same with the footer: for the top border there, use 100% 0 0 0.
.about-wrapper {
padding: 20px;
border-bottom: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 0 0 100% 0;
background: #110BFF linear-gradient(#519DFE, #110BFF);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
height: 100vh;
color: white;
}
.footer-wrapper {
height: 400px;
background: #001ED4;
border-top: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 100% 0 0 0;
<div class='about-wrapper'>
<img src='https://image.shutterstock.com/image-photo/gorilla-thinking-260nw-54482215.jpg' alt='Adam Face'>
<h2>Name</h2>
<p>Welcome to my site! I am a developer currently developing in ReactJS.</p>
</div>
<!-- Footer -->
<div class='footer-wrapper'>
</div>
I'm using a CSS Sprite Sheet technology and have a problem with multiple backgrounds.
In this website - https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img you can see how to set a background from a sprite sheet but my case is a bit different.
Simple code:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat, url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: auto;
height: 40px;
background-size: 319px 349px, auto;
}
<div id="nav1"></div>
And the problem is I don't want to show these 2 icons. I want to show only the first one:
How could I make it? I've tried height and width properties but I think it's not for multiple backgrounds.
It is not possible to crop each image in a multiple-background setting separately. So if you want to keep the yellow bar, but only show one icon on it, consider using a pseudo-element, or an actual DOM element reserved to displaying single icons. E.g. here with an <i>:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
background-size: auto;
height: 40px;
width: auto;
}
i.icon1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
background-size: 319px 349px;
display: inline-block;
height: 40px;
width: 40px;
}
<div id="nav1"><i class="icon1"></i></div>
If you want to make sure it stays in the background, use z-index. If you want to make sure it doesn't interfere with the content of #nav1, use position: absolute; top: 0; left: 0 as well.
You would have to specify a width.
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
width: 40px;
height: 40px;
background-size: 319px 349px, auto;
position: relative;
}
#nav1:after {
content: "";
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: 232px;
height: 40px;
position: absolute;
z-index: -1;
}
<div id="nav1"></div>
I am trying to position a background image on the right side of the screen so that on medium screens one could see a half of it and on big ones the whole image (the image should not be scaled). The problem is that there seems to be no way to position left side of the background in the center of the div that has an unknown width.
And I can't use an img tag because it will result in a horizontal scrollbar.
EDIT:
It seems that there is no way to position a background the way I wanted, at least with background-position. You can offset a background from either side by writing background-position: top 50px left 100px, but you cannot do the same with position center. I wonder why.
Have you try to set a background size and a background position like so :
background-position: 100% 0;
background-size:50%;
You can test it here: https://jsfiddle.net/dL2u6co7/
Here is a working solution. I added another block with an absolute positioning inside the container.
.container {
margin: 50px;
padding: 10px 10px;
position: relative;
width:400px;
height:270px;
border:2px solid red;
}
.text {
float: left;
height: 200px;
width: 150px;
background-color: green;
}
.bg {
position: absolute;
top: 10px;
left: 50%;
width: 50%;
height: 250px;
background-image: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg');
background-position: 0 0;
background-repeat:no-repeat;
background-size: cover;
}
<div class="container">
<div class="text">
Text block
</div>
<div class="bg">
</div>
</div>
I am trying to make my background-img round and put it into center. I am trying with code given below:
.jumbotronhh
{
background-image: url('http://simplelize.com/wp content/uploads/2013/03/old-camera-620x350.jpg');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px; *//If I don't use this line then the background picture stays in center in a rectangular form but after using this I got the bg-img circle but it moves at the left side of the screen..*
}
what to do?! I am totally novice.. pls help..
You could put the image behind everything else to look like an actual background-image, by creating a div class and setting some z-index.
<div class="bg-image">
<img src="mybackground.jpg">
</div>
And CSS:
.bg-image {
position: relative;
min-width: 100%;
min-height: auto;
}
.bg-image img {
position: relative;
width: 100%;
height: auto;
z-index: -100;
border-radius: 30px 30px 30px 30px;
}
Since you really can't use the border-radius in background properties.
I tested your code with another picture and it works fine
Let me know if you mean another thing.
HTML:
<div class="jumbotronhh"></div>
CSS:
.jumbotronhh
{
background-image: url('http://goo.gl/amTgah');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px;
}
Sorry if the layout of the question seems weird, I've wrote this question now for about 10 times over and over again in this editor, resulting always in getting an error message "unformatted code found etc." - so I removed all the code and placed picture examples. (2 hours for a simple question)
Hello folks!
I do have a .png image, containing several icons that works as CSS Sprite.
The creation of each CSS class for that is no problem as I use a generator for that. (works like a charm)
The problem is, that I want to use, for example: The created .iconInfo_32 class, as background property for another css class.
What I want to achive?
Simple said, a custom css - messagebox, with an icon on the left side.
The icon itself is in original a sprite containing multiple icons.
That's where the problem starts.
What I have
The Icons
(thats one PNG)
The Icon I want to use
How the result should look like
How it actually looks
Use another div, in a div
Yes, that would work - but I'd like to have "one" css class, without the need to put always a div, into another div, say where the position should be and so on - also I had problems with the position of the div.
I've provided a source example, hopefully this will help being able to understand my question and my goal.
Excuse me if the layout of my question is unusual and unpleasent, I would have done it in another way, but the editor just won't let me
Source
HTML
<div class="warning_without_sprite">
This is a DIV container<br />
showing an error message with the use of 'close_32.png' as Icon. (No Sprite)
</div><br /><br /><br /><br />
<div class="warning_with_sprite">
This is a DIV container<br />
showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>
CSS
<style type="text/css">
.iconInfo_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -0px -0px; }
.iconOk_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -32px -0px; }
.iconAdd_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -64px -0px; }
.iconClose_2_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -96px -0px; }
.iconClose_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -128px -0px; }
.iconDelete_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -160px -0px; }
.iconDownload_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -192px -0px; }
.iconHelp_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -224px -0px; }
.warning_without_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background-color: #FFBABA;
background-image: url('images/close_32.png');
}
.warning_with_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background: #FFBABA url('images/icons.png') no-repeat -128px -0px;
}
</style>
>> Download as RAR. <<
It's because you've set it as a background-image across the whole <div> element and because the sprite contains multiple images it will show them all. You can't specify how much of that sprite to show.
You'll have to insert a <span> element into your <div>. This will allow you to specify the size of the span and position it relative to your div container.
<div class="warning">
<span class="warning_with_sprite"></span>
This is a DIV container<br />
showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>
CSS:
.warning_with_sprite {
position:absolute; left:16px; top:16px;
background-repeat: no-repeat;
background-position: 10px center;
width:20px; height:20px;
background: url('http://i5.minus.com/id1CYq.png') no-repeat -133px -2px;
}
.warning {
float:left;
color: #D8000C;
border: 1px solid;
position:relative;
padding: 10px 10px 10px 50px;
background: #FFBABA;
}
See a demo here
Note: you'll have to change the image back to your sprite and the top, left, height and width properties will have to change inline with your requirements