I want to have a shape under website logo but it needs to be continued from both sides by orange bars so it would look as a one piece. Here is the preview that I've created so far.
I'm stucked on this for hours. Please do you have idea how to accomplish that and keep it responsible? Thank you!
Here is how it should look like.
Set the background color of .test to the solid color in your background image, then position it properly. Lastly set the logo to position: absolute (don't worry it wont move unless you give it a position) then set the z-index: 2; to raise it above the squiggle.
(Demo)
.test {
position: relative;
background-image: url('//jumbo.elique.cz/img/navbar-bottom.png');
width: 345px;
height: 34px;
top: 64px;
background-color: #0b1b33;
}
.navbar-brand {
position: absolute;
z-index: 2;
}
Now this may cause the background color to cover up some of the busses in the background, to fix this you can wrap the nav in a 100px tall div with the same background-color, making this more uniform
(Demo)
.wrap {
background-color: #0b1b33;
height: 100px;
}
Related
I want to display some random design images on my sites background as background-image, problem now is that every time I place such an image it somehow interacts with nearby boxes etc.
I just want my design images (small icons etc) to be part of the background without getting in touch with other non-design elements like text, boxes etc.
Something like that I guess:
body {
min-height: 100vh;
position: relative;
height: auto;
width: auto;
background-image: url("/static/pattern.jpg");
background-repeat: repeat;
z-index: -10;
} -> "The actual background of the site"
.design_element_01 {
position: relative;
z-index: -1;
background-image: url("/static/xyz.png");
max-width: 100px;
} -> "The design element that should get placed onto the body background from above"
Try:
.design_element_01 {
position: absolute
/*...*/
}
In addition, you might need to change max-width to width, since a background doesn't provide width to the element.
Centering the Background
There are a few different approaches to centering the background. I'll outline one here; if it doesn't work for you, I can describe others.
Essentially, the idea is to make the .design_element_01 element itself take up the entire page. Then, background-size can be used to constrain the size of the background, and background-position can be used to center it. A basic example would be:
.design_element_01 {
position: absolute;
top: 0;
left: 0;
background: url("/static/xyz.png");
width: 100%;
height: 100%;
/* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
background-size: 100px;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
(Do note that I haven't tested this; you may need to tweak it.)
If you test this example, however, you will notice that this centers the background on the screen, but not necessarily the entire page. This may or may not be what you want. If not, you can change the <body> element's position property:
body {
position: relative;
}
This should cause the .design_element_01 element to be positioned relative to the <body> element.
I also created a JSFiddle example to demonstrate the solution: https://jsfiddle.net/mouqewzv/.
Finally, if you don't want your element completely centered, but just offset from the center, you could tweak the left and top properties of design_element_01 to position the background initially at the center, but then offset it.
Try setting your design_element_01 position to absolute NOT relative
and then try to place it however you want using
left:
right:
top:
bottom:
z-index:
Hope this works!
I'm trying to recreate something, which I myself did by mistake:
https://bgiltphotos.files.wordpress.com/2015/09/img.jpg
It was my very first CSS attempt, and I kept adding selectors in a stopgap fashion. Then I decided to rewrite the file, and did not save the original...
This has an img position:absolute and an h1 in the header section, and then comes the article text. What I can't reproduce is the positioning of the image for the first three lines of the text: it's between the text and the background color (I then reversed the text color just for these three lines). Whatever I tried now, I either have the image covering both text and background color, or else the background color covering the image from the first line of text.
Here is the current CSS:
html {
background-color: #5F5F5F;
}
img.shost {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
div#headertext {
position: relative;
top: 5em;
left: 2.0em;
width: 60em;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div#articleMain {
position: relative;
top: 10em;
width: 60em;
margin-left: auto;
margin-right: auto;
background-color: #fdfdf9;
}
Any help would be very much appreciated!
Solved it – had to give the background-color property to body and not to article.
Thanks for the help, guys!
Assuming img.shost is your image just add a property top and mess around with the variables until you find your desired image position
Heres a sloppy Codepen http://codepen.io/noobskie/pen/MaYdbj
just change the top:-120%; and you can see what I mean
please try to give the image z-index= -1;
it should work if you give a z-index value to the relative positioned parent
I'm trying to build a website header that is semi transparent, and contains a semi transparent image that hangs outside the of the header div, like in the image linked below.
Because of overlapping opacities, I can't simply put a semi transparent image in to a semi transparent div and add a negative margin to the image. The best I could come up with was taking the height of the header image, and cutting that bit of the logo image, like in image attached. However that's not ideal, as doesn't play nice responsively etc etc.
Any ideas of how I might achieve this look?
Thanks in advance.
If you know the height of your menu then you can place both the logo and the menu inside of a container. Then position the logo with the top value equalling the height of the menu.
.header-bg {
background: rgba(225, 225, 225, 0.5);
position: relative;
height: 60px;
}
.header-bg .logo {
width: 90px;
height: 90px;
background: rgba(225, 225, 225, 0.5);
position: absolute;
top: 60px;
left: 10%;
}
See this fiddle: http://jsfiddle.net/3kxBt/1/
Hope that helps in some way.
This is an interesting problem and there are a couple ways to solve it; two come immediately to my mind.
The first is your method; carefully position things so that you don't have multiple translucent sections overlapping. This wouldn't be too difficult; if you go with this method I would recommend breaking the header into sections left and right of the image and using absolute positioning.
The second and easier way is to create a version of the picture with the semi-transparent white overlay you desire already applied. Then you can use that as the background for the menu and image. The only tricky thing here is you have to make sure the images line up by either using fixed positioning or calculated pixel offsets. This approach has been around for a long time and you can see any early example (2001-ish) of it here.
My take on it is to create a :before pseudo-element. It has its problems, including what if the logo changes in size at some point, but overall it works.
HTML
<a class="logo" href="#">
<img src="https://example.com/logo.png" />
</a>
CSS
nav a.logo {
position: relative;
...
display: inline-block;
line-height: 0.0001em;
font-size: 0.0001em;
}
nav a.logo img {
position: relative; /* for z-index issues. giving the image a relative
position automatically will place it above the
absolutely positioned :before element. This is
because the before element is rendered before the
image */
}
nav a.logo:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 71px;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.4);
...
}
Demo: http://jsfiddle.net/ZP6LQ/1/show
Source: http://jsfiddle.net/ZP6LQ/1/
You can use rgba color format for background of both the .logo and the header to achieve your desired effect. However, you have to give position: absolute; to your .logo class because it needs to come right below the header. If you put your .logo on top of your header, then colors will overlap and won't look right. So, it needs to starts at the bottom of the header.
The header should have position: relative; so that your .logo is positioned relatively to the header. This way, you don't even need to know the height of your header because when you define top position of your .logo, you can simply use top: 100% so that it always starts right below your header. You don't have to hardcode that top value.
Now, you need to shift your actual logo (image) inside your .logo on top because its appearing below the header right now. For that you can simply push the image by giving it negative margin-top value.
SEE THE DEMO
The code would look like this:
HTML
<header>
<h1 class="logo">
<img src="/image/path" alt="logo">
</h1>
</header>
CSS
header {
background: rgba(255,255,255, 0.7);
position: relative;
}
.logo {
position: absolute;
top: 100%;
background: rgba(255,255,255, 0.7);
}
.logo img {
margin-top: -50px;
}
How can I make a semi-transparent element with text in it which goes on top of one navigation bar, but goes under the other? I am trying to make an effect like in http://hongkong.grand.hyatt.com/en/hotel/home.html where the red Hyatt logo and "hong kong" go above [over] the brown bar, but below the white (top of screen). https://www.dropbox.com/s/xarl3qe3ncxrdm1/Untitled20130520174504.jpg?v=0rc-s
You'll just need to use various z-index values for the arrangement and opacity to get the transparency.
(source: snag.gy)
#topbar {
height: 20px;
width: 100%;
position: fixed; /*so it doesn't scroll with the page*/
left: 0;
top: 0;
z-index: 3; /*the bar on top gets the highest index because it's above everything else*/
}
#secondtopbar {
height: 20px;
width: 100%;
position: fixed;
top: 20px;
left: 0;
z-index: 1; /*the second bar on top gets the lowest index because it's below everything else except the text, with doesn't even get a z-index*/
}
#logo {
opacity: 0.5; /*this makes it half-transparent, on a scale from 0-1*/
height: 100px;
width: 100px;
position: absolute;
top: 30px;
left: 30px;
z-index: 2; /*the logo gets the middle index because it's in between*/
}
What type of a solution are you searching for? If you check out what the Grand Hyatt did, they're using an image and setting position: absolute to place it where they want it to appear.
If you do not want to use an image, you could use some HTML elements layered on top of each other to recreate the logo: See here http://jsfiddle.net/U3mCz/
Couple of notes:
You'll have to set a lower z-index on the parent of the logowrapper
(in my example, anything under 500 will work), so that the logo stays
on top.
You'll need to adjust your css on the logowrapper to position the logo where you want it.
If you adjust the height of the red bar, make sure you set your line-height equal to the height of the red bar to ensure vertical-centering of your text!
Hope that helps you out.
i have created a website but now i am having 1 issue. i am unable to do click even on link and navigation.
you can take a look:
http://www.cambridgekitty.com/business-directory/
to check the real codes.
HTML
<div id="main-bg">
<div id="left-side-logo"></div>
</div>
CSS
#wrap {
padding: 0;
position: relative;
width: 100%;
}
#main-bg {
background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent;
margin: 0 auto;
min-height: 733px;
position: relative;
width: 100%;
z-index: -9999;
}
just add a logo on left side
#left-side-logo {
background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent;
height: 500px;
left: -150px;
opacity: 0.8;
position: absolute;
top: -60px;
width: 500px;
z-index: -1;
}
and add
position: relative;
to #wrap. and add
z-index: -9999;
to #main-bg.
but after doing this ... i am unable to click on logo or even navigation links.
please let me know why i am casusing this issue.
thank you
Don't use a negative z-index if you don't know exactly what you're doing. Use a positive value and just set #left-side-logo's z-index to a value even higher.
Since #wrap has a negative z-index, it's placed behind the content of #inner-wrapper in the latter's stacking index.
See also:
W3C: CSS2.1: 9 Visual formatting model (Section z-index)
If I were you, I would simple change the elements I apply the different background images to. Give #inner-wrapper the city image background, and #main-bg the logo background. Then use the background-position property to position the logo background (currently the two zeroes in your background rule). Also, if you want opacity for that logo you can achieve that by simply setting it in Photoshop or whatever editor you prefer.
This solution means you don't have to deal with the z-index issues and makes for more hack-free and semantic mark-up, although you do have a few containers. Hope this helps :)