Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Here is my header code where I want to set the background.
<header>
<img src="images/MeMain.jpg" alt="Drawing of Me" class="profile-image">
<h1 class="tag name">Hello, I’m Me.</h1>
<p class="tag location">My home is Blank, Blank.</p>
</header>
Here is the associated CSS code:
header {
text-align: center;
background: url('images/portland.jpg') no-repeat top center ;
background-size: cover;
overflow: hidden;
padding-top: 60px;
}
If I code in the image to the html page it appears, but I can't get it to appear using url. I've tried moving the location of the picture, I've tried changing the url to (".../images/portland.jpg"). Nothing I've tried so far works.
It looks like you have one too many periods in the url path on your css. Also, sidenote, newer browsers don't need any quotes on the path.
Try this:
.header {
background: url(../images/portland.jpg) no-repeat center center fixed;
background-size:cover
}
You can even give your site a different background for a phone size screen like so:
#media only screen and max-width: 48em {
.header {background: url(../images/portland-portrait.jpg) no-repeat center center fixed;}
}
Source - http://fritzemedia.com/
the issue is that you have too many periods.
you should use
("../images/portland.jpg")
You had ...
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
This is my first time using html.
Im trying to replicate the look in this image :
https://prnt.sc/1152ms5
This is what im stuck on:
https://prnt.sc/1152n3s
Ive used float right, and float left to get my image to be to the right of my paragraph, but i cant get it to start at the top of the page. (if that makes sense)
I think my issue is the img colliding with some sort of border from ("Bem vindo")
Here is my html and css mess:
https://prnt.sc/1152non
https://prnt.sc/1152o40
You can add style to your section and display it in block way, the same for your image.
<section style="padding: 2rem; background-color: grey; display: block; float: left; height: 500px; color: white">
<h1>SOME CONTENT</h1>
</section>
<img style="display: block; float: left; width: 50%;" src="https://cdn.business2community.com/wp-content/uploads/2013/09/best-press-release-example.jpg" alt=""/>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a logo that I need to insert into an html page, that logo is in a square size but I need it to become a circle, how can I do that using CSS?
.logo {
background: url('path/to/image.jpg');
height: 100px;
width: 100px;
border-radius: 100px;
}
This should do the job. Set the background url to the one of the logo and height and width accordingly.
Use border-radius. A simple example you can see here:
img.logo {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
<img class="logo" src="http://placehold.it/100x100"/>
Use border-radius then set overflow to hidden.
use border and make
border-radius:50%;
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
It might be really stupid and easy, but I spend two hours trying to get it.
I have a simple div with a class "payment"
<div class="payment">
</div>
and in css
.payment {
height: 289px;
width: 320px;
background-image: url('../images/pay/sprite_paywall.png');
background-position: 0 0;
background-repeat: no-repeat;
position: absolute; }
I checked the css file on the network, and saw the class there. I tried to delete the cache browser, but no luck. Anyone has an idea?
Try to use something like this : LINK
background: #f00 url('../images/pay/sprite_paywall.png') 0 0 no-repeat;
Instead of background image, im using background color. you are not specifying any left, top etc.. so there is no need to specify position.
Maybe the problem is the import of the CSS file to you'r html code. You have to ways to do that(always add the tags in head tag).
1- Using <link> tag like that:
<link rel="stylesheet" href="your/css/route_file.css" />
2- Using <style> that not requieres to import a file:
<style type="text/css">
.payment {
height: 289px;
width: 320px;
background-image: url('../images/pay/sprite_paywall.png');
background-position: 0 0;
background-repeat: no-repeat;
position: absolute;
}
</style>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
See http://www.levomedia.com/contact-us/
If your screen is of a good size there might not be a scroll so you will have to zoom in... but when there is a scroll and you move down the page, my theme forces my header to travel with you, which I would like to remove if possible.
What would be the best way of stopping this from happening, so that it stays in the same position and does not travel with you?
The Best thing would be to remove the relevant Js code , which is causing this.
I have found this
<script src="http://www.levomedia.com/wp-content/themes/sensitive/js/jquery.stickymenu.js?ver=3.6" type="text/javascript">
js code file inclusion in your page, just remove it, everthing should works fine, as you intend to.
this will also improve your page rendering time and efficiency :)
Happy Coding :)
you need to remove the css attribute :
position: fixed
Which you had used on the header.
Stop using the jquery.stickymenu.js script and things gonna be ok. It applies position:fixed to your header, when you scroll the page down and you don't need it.
Like this
please add position:fixed, top:0; width:100%; in .navbar-wrapper selector
and
please add position:relative; top:66px; in this selector .type-post, .type-post .post, .type-page, .type-page .post
CSS
.navbar-wrapper {
background: url("images/wild_oliva.png") repeat scroll 0 0 #EEEEEE;
margin-bottom: 20px;
padding-bottom: 0;
padding-top: 20px;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.type-post, .type-post .post, .type-page, .type-page .post {
margin: 0 !important;
padding: 0 !important;
position: relative;
top: 66px;
}
In your case, Js is adding the position:fixed attribute in topmenu once you scroll down.So you can do this by css.
convert this :
<div id="topmenu" class="container" >
to this:
<div id="topmenu" class="container" style="position:relative !important" >
If you dont want inline Css Make a class like this:
.container{
position:relative !important
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Please check this link
The left panel text goes hidden under the center picture if I re-size the browser window.
How do I fix it?
Set .ac-wrapper h2 30% instead of 50%
.ac-wrapper h2 {
width: 30%;
}
EDITED
html
<div class="ac-device">
<h2 style="color:#888888">Logical & analytical. <span>Argues till someone <br>just walks away!</span></h2>
<img src="images/screen1.jpg">
<h3 class="ac-title">Not enough of an artist to work upon your imagination. Prefers to do stuff freely. Some may not like that, but that's the way I am!</h3>
</div>
CSS
.ac-wrapper h2 {
top: 20%;
width: 100%;
right: 100%;
position: absolute;
font-weight: 300;
font-size: 4em;
text-align: center;
padding: 0;
}
I'm looking at Chrome Dev Tools and I don't actually see where at any point styles from within a media query are being loaded. The obvious result you want is that right now that left panel is
position: absolute;
width: 50%;
and of course at this resolution you want that width to be something smaller. You can change the styles as your title suggests with a media query, but none's firing. Do you mind posting your relevant CSS to see why--if it exists--your mq isn't working?
Judging by the quality of your design I'm guessing you definitely know what a media query is, but just in case:
#media screen and (min-width: 1366px) {
id.class {
width: 40%; // or whatever
}
}