I'm trying to place my logo into a div / span tag / h1 tag ( anywhere really )
I'm trying to load the image using CSS. I'm nearly sure i've done this many times before.. but for some reason it's not working this time.
CSS
.logo{
background-image:url(../img/logo-6.png);
width:400px;
height:75px;
}
It's simple. nothing special. I know the path to the image is correct. I was coding in Sublime text.. but moved to Dreamweaver when this didn't work. When i hover over the image URL in Dreamweaver it shows my image.. so it's the correct path.
HTML
<span class="logo"></span>
<div class="logo"></div>
Thats just two example of what i'm trying. I've no content in the span or div and I won't use both once I get one working.
the width and height that i've set are the correct size that the image is.
Why won't it appear as a background image in the div / span ?
Try changing your width and height to percentage
width: 100%; height: 100%;
Or try the background-image without the width and height, and see!
As for the html part:
Try adding the <img> inside the <div> or the <span>
then go to your css and try this:
img { width: 100%; height: auto;}
Related
On my site when the user uploads their profile picture, it gets funny when the image dimentions are small. Below is an example
I dont know what to do is there a way to make my image come up properly when the image file is not with large dimensions.
make sure that the container of the images has the width and height not the image and on the image use the following
object-fit:cover;
object-position:center;
width:100%;
height:100%;
Try this......
img{
display: block;
width:100%;
height:auto;
}
<div class="hair_care">
<img src="/Content/BusinessProfileImages/bbef41d2.jpg">
</div>
this is my code below of the css. That diesnt work for small images large files with large dimentions come good. and small files images look funny.
.hair_care {
float: left;
width: 318px;
}
Just check if there is width attribute on IMG tag or hard coded pixel/percentage width applied on image tag via CSS rule.
In case of width attribute with IMG tag, please remove that width tag and let CSS control the width and make sure that you set the 'max-width: 100%' and 'width: auto' which is the thumb rule for responsive design.
img {
max-width: 100%;
}
Second, if image is appearing as background image then check the "background-size" properties.
I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.
I have an SVG image that I am trying to use in my page that I would like to stretch with page. The same CSS that works with non-SVG images doesn't work for the SVG. As seen in the quick fiddle here -> http://jsfiddle.net/TUby3/
My HTML
<img src="image.svg" id="topHeader">
My CSS
#topHeader {
width: calc(85% + 10px);
height: 46px;
}
I've been trying different things in my CSS but can't seem to get anything to work. When I make the page smaller, the width of the image does get smaller but the height does not stay fixed, the height shrinks in uniform with the width.
Does anyone know a solution to this that does not involve trading the SVG for a PNG or JPEG?
Try this:
http://jsfiddle.net/TUby3/1/
Just put a div with a set height around it.
html
<div id="test">
Your Image
</div>
css
#test{
height:"60px;
}
You could probably achieve the same effect you are after by setting it as a background image to a div and using the background-size css...
background:url(http://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig14/img/napoleon%20for%20svg%201.svg) left top no-repeat;
background-size:100% 100%;
(That said, Mark's solution works fine for me in Chrome)
I am using a background image for my top "heading" div section of my website. It was drawn on CorelDrawX6 and exported to a .jpg image, meaning I can't set the height and width exactly right when exporting. What I want to achieve is have the webpage scale the background image to the right height. I want to have height:150px; width:100%, but because it is applied to the div like this:
<div style = "height:150px;background-image:url('Design.jpg');">
I can't apply styling directly to the image. Does anyone have a solution?
P.S. I have checked out many of the "related questions" and have not found an answer. Also, please bear in mind I want a background image for one div, not the whole page (which would be a lot easier).
Current situation:
My desired situation is to have the full image as a background (the current image is a scaled-up version, the real image (which I could not upload) looks the same but has text on, and the light blue bar is much smaller).
try
HTML
<div class="lorem" alt="lipsum" title="lorem lipsum">
<img class=ImgLorem></img>
</div>
CSS
.lorem{
}
.ImgLorem{
}
.lorem img{
background: url(Design.jpg);
height:150px;
width:100%;
}
this should work.
Let me know.
This is what you looking for?
background-size: auto 150px;
I'm extremely confused why my code won't display the image properly. Here's my code:
<style type = "text/css">
#pic {
background:url('http://www.tishbi.eu/img/shopping_cart.png') no-repeat;
</style>
<div id = "pic"> <p>
</p> </div>
Only a tiny portion of the image is displayed along with the text... I'm so confused why this is happening. The only way I can display the whole image is if I add almost 170px of padding around the image. Someone please help!
Thanks.
You need a closing brace before </style>
#pic has a width and height of zero, so the background wont show. Either put content in the div, or set a width and height.
Check it out working, here: http://jsfiddle.net/UzcDM/1/
You need to specify a width and height for your div.
Also, make sure you close your CSS:
#pic {
background:url('http://www.tishbi.eu/img/shopping_cart.png') no-repeat;
width: 200px;
height: 300px;
}
Put Height and width in your css class.
Please view demo here
taking that path set right e.g. ../../Images/logo/google.png,
try adding position:absolute;
it might be simply behind some elements