So I just started out with the Ionic Framework. And I am trying to add a background image. But when I run the application in the browser, I don't see the image. In my console I get a 404 error. I believe my path is correct. I followed this tutorial after I was not sure if my css was correct. Which is basically the same as I have got. So does anybody know what the problem is exactly?
Part of my html code is the following:
<div class="logo"></div>
And my css is the following:
.logo{
background-image: url('../img/logo.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 80%;
height: 246px;
margin: auto;
z-index: 2;
position: relative;
}
Some problems can occur with just using 'background' in CSS, especially when the container doesn't have any other contents.
Try the following:
Adding display: block; with a Width and Height set, this can override any inherited display settings.
Reduce the amount of CSS to troubleshoot, sometimes you've just missing a small part, that has moved or hidden the actual container
IF all else fails, do it step by step on JSFIDDLE and when it continues to work as required, try copying it over. This also helps you learn
Related
I am a newbie. I'm finding it hard to add background image to a box element. I've tried resetting the code, moving it to a new folder, resizing the image and changing the class but nothing works. The image doesn't show in the box When I inspect the element on Chrome, it says error file not found.
This is the CSS below
.static-width{
width: 300px;
height: 300px;
background-color: #606060;
background-image: url(Images\millylogo.jpg);
background-repeat: no-repeat;
background-position: center;
}
I think your path is not wright. You must to put the right path (absolute or relative) into the property. You should create a repository with your project and put all your files into it.
A good documentation here
I am using this function get_the_post_thumbnail_url() to pull the featured image of a post. I don't want to use the WordPress predefined image sizes which leads to using CSS. I specified the width of 40px but I noticed this pushes the text to the right. The image itself resizes perfectly but it appears the image width still remains the same which creates the space between the image and the text.
Here is the image:
Some CSS fix?
Thanks.
Well we don't not have a code to work with. So just try to use on the container display: inline-block;
or display: inline; lastly display: inline-flex;
choose one of these although they might all look the same, but they are not.
And the space will be removed since the container will wrap over the content inside of it.
Add this piece of code along with it to fill the image fully :
<div class="container"></div>
.container {
width: 40px;
height: 40px;
background-image: url("your image");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
you may add this style to the image tag and it must remove the extra space
margin-right: 5px !important;
I have this CSS code which generates transparent div:
.camera_caption {
position: relative;
background: url(../images/capture_bg1.png) 0 0 repeat-x;
left: 0;
margin-top: 263px;
width: 717px;
height: 234px;
padding-left: 365px;
font: normal 14px/24px 'Roboto';
color: #fff;
}
As you can see the background is generated using this image:
But I have several problems with this solution:
I would like to use pure CSS code to display colorful background.
And also I would like to resize the background height according to content size. For example I have several lines of text in different languages. I need to dynamically to resize the background layer .camera_caption.
Can you propose me some solution of the problems?
I am not user as to what exactly your issue is and what is it that you want to get done.
But for auto resize you can remove the width and height given. Maybe you can have 100% width if that will be more appealing
width:100%;
If by any chance you need to have a minimum height and width you can get it done like this
min-height:500px;
min-width:500px;
Add background color with this code
background:blue;
If you can elaborate or better post a fiddle, we can help better.
If you want to use pure css, an online tool you may want to consider is http://duri.me/, which converts an uploaded image into base-64 encoding that you then include in your css class definition. The end result looks like the example below. Doing this, you don't need an image, because the value of the background-image:url(data:...) property is the image. In your case, simply create your colorful background in an image editor, upload it, and grab the generated code.
There are goods and bads to this. On the bright side, you don't have to worry about a missing image, but you're adding a lot of code (especially if it's a large image), and the "image" never gets cached. You may also have to use a bit of javascript to dynamically resize the background, or, you can look into using the css property background-resize to scale it appropriately.
.myImg {
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-image: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAA8ADwBAREA/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEBAAA/APn+iiiiiiiiiiiiiiiirWm6beavqENjYW73FzM21I0HJP8AQe54Fadz4O16G4aKDSr67QMEE1vayPG7Yz8pA59j3HPSqsvhzXIXCS6NqCOSyhWtXBJVdzDGOoXk+g5qEaPqZXcNOuyvkrPnyGx5bHCv0+6TwD0JrV1DwRr2m6CusXOn3EVsH8qZZYzHJC/UblbBwQQQw4P1rnaKK9E0Sa3+HNxpt1fZXW7spLMvlCRrG0PJG1uPNkX1+6p9W40NU+NE9/c2skejpGtrqv8AaCZuDlwGyEb5fQKMj06VFa/GOWCys7OTw/ayw2rSOpM7h2aRJFlLN/teaT7YHWorf4tfYBDJp+gQQ3MFgunxSvcvIFiSQSR5UjBKkde9XoPixpVzYa1a6h4dUw6kySzRG5klWR9xEm0scxkqQVxkKUHHORwfifw//YV5DJbTfatLvY/PsLsDAlj9D6Op+Vl7EfSsOum8MXWlaAw13UoUv7qI5sdPb7jSD/lpL6Ip6L1Y+gGaydb1q+8QatcanqMokuZ3LuQoUc+gHSs+iiiux0bxbb3Hh1vCviKLzNLZzJa3caAzWMvTeP76HoynnHQ8AVyl1bm1upIDJHJsOA8bZVh2IPoahooooooooooooooooooooooor//Z)
}
I have a problem which has me stumped. I have it simplified down to this. The relevant (only) CSS style is:
#segment1,
#segment2 {
width: 16.6667%;
height: 100%;
float: left;
background-image: url(../XYZ-TEST/1alt.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}
and the relevant test HTML is:
<div id="segment1">Segment one</div>
<div id="segment2">Segment two</div>
So you think you'd get two identical divs side by side, with the same background image - except when it is rendered, the background image ONLY appears on the first occurring . The problem appears to be on the rendering, not the code. If I put the HTML for segment2 first, that one gets the background image and the other one doesn't. Other CSS seems fine, just the background image fails. The path to the background image is fine.
It looks like a problem within CSS with defining multiple background images, but I can't find any other problem like it mentioned on the web. Tested in both Chrome and FF. I've ruled out a stray semi-colon or similar, because both are defined simultaneously. Can you see anything I've missed ?
Remove background-attachment:fixed from css. It should solve your issue.
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/256/
#segment1, #segment2 {
width: 16.6667%;
height: 100%;
float: left;
background-image: url(http://www-mtl.mit.edu/img/bg_01.gif);
background-repeat: no-repeat;
background-position: top left;
}
Explanation: If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
Firstly, I'm new-ish to this, so please bear with me.
I've implemented a pretty cool 'fade on scroll script' to my site.
However, what I'm looking to do is have the image at the top span 100% width like fastcocreate's site.
This is the div I'm working with:
<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% 560px;">
</div>
Now I've tried adding a 'background-size: 100% auto;' to the div, which does the trick, except this does weird things to my text. For example, if I make the browser slimmer the text doesn't move with it – so I scrapped that idea.
Next I changed it to 'background-size: 100% 560px;' which solved this issue. But created another one is that the image squashes when you make the browser smaller, or stretches it when I make it wider.
I feel I'm closer with the one above, but I'm looking for a solution to the stretching image issue. Do I need to upload an image that's bigger than the current dimensions?
As I've said earlier these guys do a good job.
it would appear that fastocreate has a min-width set to their image, have you tried a
min-width: 100%;
height: auto;
?
Im pretty sure thats what fastocreate does
best,
-b
*Also, try enabling the "inspect element" on your browser. Its super helpful when trying to mirror someone's style.
Edit:
in response to your comment, you could try making a jQuery function that would resize it.
for example
function resize(){
var height = $('img').width / 2; //sets variable height to the width divided by 2
$('img').height(height); // sets the value of the height to the variable height
};
or something like that.