This is my html code, it works but it gives me a problem with the body background-color of the bootstrap, 'cause I don't want to have a background color. How can I eliminate it? Can someone help me?
I put an image of the result.enter image description here
This is my code
I searched on the internet but, it didn't help. It's for a school project.
Your opening body tag looks like this:
<body bg-transparent>
But bg-transparent is the class name of a (predefined) bootstrap class, so you need to write it like this:
<body class="bg-transparent">
You can override body CSS styles:
body {
background-color: transparent;
}
Related
Hope someone can help me with this.Here is my Html code:
and here is my css code:
And Here is my code from codepen:
enter code hereAnd Here is my code from codepen
I tried with every parent elements with hover. it doesn't work until coming '#idhireme' line.
When I hover the image nothing changes. Is there anyone know why doesn't it work?
It looks like the hover doesn't reach the image.
Try to apply the :hover pseudo-class to the parent element:
card-radius:hover card-gray {
filter: grayscale(0%) !important;
}
If it doesn't work, try one level up.
I forgot the <div class= "modal-content"> bootstrap class.I put it after class="modal-dialog".
I currently have this, but it is not setting the background as expected:
<body style: background-image url()>
Also I need it to be a file not a link
Looks like #Sverre beat me to the suggestion of moving your CSS style to a separate file. If you prefer to leave it directly in the tags, you will have to reformat it a bit like so:
<body style="background-image: url('https://yourdomain.com/some-image.png')">
I'd recommend doing this in your CSS file. This page goes in depth on CSS backgrounds and shows you how to style them as well.
You can do it in the body tag as follows:
body {
background-image: url("example.jpg");
}
As you can see from these screenshots: http://imgur.com/JUh6VVG and http://imgur.com/Sg7av0n I'm using layerslider wp and I'd like to make the background around the text transparent. You can see in the second screenshot that there's a place for custom css. What css should I put in there to make that happen? As always I appreciate the help.
Cheers!
You'll have to find the class or id of that div. Once you know that, you can use the following css:
.your-text-div {
background-color: transparent;
}
I am currently developing a website for a school task. I am quite new to HTML and CSS, so I don't know much about how I would do this.
I would like to change the default colour of the twitter-bootstrap UI on my div class="well" that located on the center of the page to #BA935A.
My website can be found here. So I just need an idea of how I could do it.
I'm not sure which color you're referring to by "default color", but this page shows the less values you can override in your stylesheet with the color you want to use. So if you wanted to change the background color, you could add an entry in your less stylesheet for #bodyBackground that is set to #BA935A.
Open your source code, find following Snippet:
<style type="text/css">
html,
body {
background-color:#20437D;
}
</style>
Change the #20437D to #BA935A.
You would get what you want.
I just went through the answers, since I had an almost similar question. This is how I solved my problem (Based on the answers) to override default bootstrap properties.
<div class="well well-lg text-center" style="background-color:#EC031E; !important">
This well has a Dark Red Background!
</div>
PS: I know its pretty late to answer this question, but I just hope this helps somebody wanting similar customization!
Actually your question are not so clearly, but I'll share how to forcing our class on bootstrap class that I done.
If you want to change color, you can just change on the html directly manually like:
<div class="well" style="background-color:#88B5C2;">abc</div>
But if you want to use your own class. You can add !important. I give you an example how I forcing my style to my bootstrap class:
css part
.mystyle
{
background-color:#88B5C2 !important;
}
html part
<div class="well mystyle">abc</div>
If you're not using !important the style still can be applied, but for more secure please using it, so your style would be prioritize than Boostrap's style.
Is it possible to add a line to my CSS like this:
.custom_bg {
background-image:url(http://domain.tld/img.ext);
background-repeat:no-repeat;
background-color:#000;
}
And then on that certain page, call this some how so that the page 'knows' to listen to this line... is that possible?
Any help is appreciated. I'm fairly new to CSS.
Thanks
What you can do is make a class with a background-image(I guess you are already having that), and than use that class on the body element of that page, so for example
.custom_bg {
background: url('URL_HERE');
}
And say you want to change the background of the contact page, you can make your HTML like this
<body class="custom_bg">
Note: Call this class on the element you want to over ride the
background image, here I am assuming that you want to over ride the
background image for the body tag.
This will over ride the default styling, I guess you must be using a general element selector in your stylesheet like
body {
background: url('URL_HERE');
}
So when you define the class, CSS will pick the image from the class thus by over riding the default background image
You could add a class to the body of that single page: <body class="custom_bg">. The rest of the pages will be unaffected by that style.
as well as I understand all you should do is add this class to the tag or any other container like this:
<body class="custom_bg">
...
</body>
Hi If you want to specify background for a particular page only in your application then do
<body class="custom_bg">
...
</body>
while the css will be
.custom_bg
{
background: url('URL_HERE');
}
and if you want the background for all pages then try the following CSS
body {
background: url('URL_HERE');
}